ComboStrap UI - Navbar

1 - About

The navbar component is the implementation of a top application bar via the bootstrap navbar.

Inside a navbar component, you can add:

3 - Syntax

<navbar breakpoint="lg" position="normal" align="left" theme="light">


  • breakpoint is one of the breakpoint code (xs,'sm, md, lg (Default), xl)
  • position is one of normal (default), top (bottom is not yet supported)
  • align defines the horizontal placement. Possible values: left(Default) or center
  • theme defines the luminance of the text. You can specify light (default) or dark
The default background-color is a light background.

3.1 - Fixed-top

If you choose a fixed-top navbar, you need also to change a strap template styling parameter. See the dedicated page Strap Template - Fixed-top navbar

4 - Example

4.1 - A navbar with two dropdown menu and the search box at the right

  • No cache when developing the bar to be sure.


  • The start of the navbar.

<navbar breakpoint="sm">

<brand class="pt-0" title="Brand">
<icon name="desktop-mac-dashboard" /> Brandly

  • Collapse to indicate all elements that will collapse when the size of the screen is lower than the navbar breakpoint


  • A group with expand=“true” to push the element that are not in the group at the right side of the page

<group expand="true">

<dropdown name="Call to Action" >
<dropdown name="UI Box">


<search class="mr-0 pr-0">


  • Output

4.2 - A dark navbar

<navbar theme="dark" background-color="dark" breakpoint="xs">
<brand title="ComboStrap Home">
<icon name="logo.svg" />
Navbar text with an inline element

5 - Documentation / Reference

Powered by ComboStrap