Skip to content
  • Theme mode
Notifications
Lucas Alvarez joined the team
9 min agoChloe Patel joined the team
24 min agoElena Haddad commented on your task
8 hours ago
View all

Navbar

The navbar is the main header of every page: brand, links, dropdowns, search and account actions that collapse behind a toggler on small screens. These examples cover expand breakpoints, light, dark and coloured bars, logo brands, offcanvas menus and several real-world layouts.

1Basic navbar

A light navbar that collapses below the lg breakpoint, with links and a dropdown.

2Brand text only

The simplest navbar: a brand as a link or as a heading.

3Logo brand

An image logo as the brand; give it a fixed height so the bar keeps its size.

4Logo and name

Combine a small logo with the brand name, aligned with flex utilities.

5Dark navbar

<code>data-ui-theme="dark"</code> with <code>.bg-dark</code> switches links, toggler and dropdowns to light-on-dark.

6Primary colored navbar

Use the theme colour as the bar background with dark-theme text for contrast.

7Navbar with search

A search form on the right side of the bar that moves into the collapsed menu on small screens.

8Right aligned with buttons

Links pushed to the right with <code>.ms-auto</code>, followed by login and sign-up buttons.

9Centered links

<code>.mx-auto</code> centers the menu between the brand and an action on the right.

10Always collapsed

Leave out the <code>.navbar-expand-*</code> class and the menu stays behind the toggler on every screen size.

11Toggler on the left

Place the toggler before the brand and expand from the md breakpoint.

12Navbar text

<code>.navbar-text</code> for plain text such as the signed-in user, vertically aligned with the links.

13Offcanvas navbar

On small screens the menu opens in an offcanvas panel instead of collapsing inline.

14Dark offcanvas navbar

A dark bar whose offcanvas menu is dark as well, including a search form.

15Icon links with badge

Icons above short labels and a cart counter badge - common for shops and apps.

16User avatar dropdown

An avatar on the right opens an account dropdown aligned to the end.

17Two-row header

A slim utility bar with contact details above the main navbar.

+1 (555) 256-8293 Seoul

18Scrolling menu

<code>.navbar-nav-scroll</code> limits the height of a long collapsed menu and lets it scroll.

19Floating pill navbar

A rounded, shadowed bar inside a padded container - a modern landing page look.

20Expandable search row

A search icon toggles a second collapse row under the bar with a full width search field.