Navbar

go.raybo.org/4AJG

Navbars are for building the main navigation items. they're related to navs, but with a lot more options.

Basic Navbar

nav class="navbar"

  • bg-{COL}
    • COL: primary secondary success danger warning info light dark white
  • navbar-{COL}
    • COL: light dark
  • navbar-expand-{BR}
    • BR: sm md lg xl xxl

Navbars are pretty complicated. they begin with a nav tag that has the navbar class. Although you could use something other than a nav, it's really the proper tag for a navbar.

Usually navbars get a couple of classes that identify the color of the background, which is a regular bg-{COL} item as well as a class that identifies whether the navigation's background is light or dark navbar-{light|dark}.

Navbars are responsive by default, so they will stack on top of one another. You can add a navbar-expand-{BR} which will expand the links into a horizontal section at a specific breakpoint.

You usually want a nav to cover the entire width of the browser or align to the grid...at least in certain parts, so there's usually a container involved.

Finally, there is a navbar-nav section, which is where your links go.

Inside Navbar

  • container{-BR}

    • BR: sm md lg xl xxl fluid

  • navbar-nav

    • nav-item nav-link

Try it

navbar-nav - section is a series of links, which can go on list items with anchor tags or just anchor tags.
nav-item - identifies each navigation item, can go in a list item or an anchor tag
nav-link - identifies the link in an anchor tag.

Special Content

navbar-brand

nav-text

Try it

navbar-brand - Allows you to place branding as a separate element on the form.

nav-text - Lets you do some text aligned properly to the form.

You can also include other elements, so for example a form element is a pretty common thing to add.

Navbar Collapse

navbar-toggler

  • navbar-toggler-icon

collapse navbar-collapse id

navbar-nav-scroll

Try it

Navbars can get long quickly, so Bootstrap provides an option to collapse items into hamburger menu at before the navbar-expand{-BR} breakpoint.

To do this, you'll need to add a button that triggers the menu

navbar-toggler - is the button that activates the dropdown. It gets a data-bs-toggle="collapse" and it needs a data-bs-target with the ID of the element that's going to be collapsed.

collapse navbar-collapse - These two classes are wrappers around the content that you want collapsed. They usually wrap the navbar-nav.

navbar-toggler-icon - The hamburger menu lives in the navbar-toggler-icon class

navbar-nav-scroll - There is an optional class that lets you determine the height of the items, just in case your menu gets a bit long for a mobile device.