Navbar

Component suite for navigation bars.

Basic example

Structure

• Navbar nav.navbar
  • Toggler setting .navbar-expand-md (expands/collapses on md breakpoint)
  • Color settings .navbar-light.bg-light ⇒ Color schemes
  • Brand a.navbar-brand
    • Text Navbar
  • Toggler button.navbar-toggler (displays on collapsed)
    • Icon (Triple bar) span.navbar-toggler-icon
  • Collapsing wrapper div.collapse.navbar-collapse (displays on expanded ⇒ Toggler )
    • Navigation ul.navbar-nav.mr-auto
      • Item Home Link ...
    • Form form.form-inline
      • Input control input.form-control
      • Button button.btn.btn-outline-success

Brand

(1) Standard (a|span).navbar-brand

Structure

• Navbar nav.navbar
  • See Color schemes for colors
  • Brand (a|span).navbar-brand Attribute
    • (For a ) Attribute href="..."
    • Text (e.g.) Navbar

(2) Heading-styled (a|span).navbar-brand.h1

Structure

• Navbar (same)
  • Brand (a|span).navbar-brand.h1.mb-0 Attributes
    • Heading-styled text .h1 (see Typography - Headings )
    • Margin adjustment .mb-0 (cancels bottom margin for heading)

(3) Image only

Structure

• Navbar (same)
  • Brand (a|span).navbar-brand
    • Image img Attributes
      • Attribute href="..."
      • Attribute width="..."
      • Attribute height="..."
      • Attribute alt="..."

(4) Image and text

Structure

• Navbar (same)
  • Brand (a|span).navbar-brand
    • Image img Attributes
      • Display .d-inline-block (⇒ Display )
      • Alignment .align-top (⇒ Vertical alignment )
      • Other attributes are same as (3) Image only
    • Text  Bootstrap (whitespace required between the image)

Nav

A navbar usually has a nav and also behaves responsively with a toggler. A nav is set inside of a collapsing wrapper. A toggler collapses a nav when the viewport width is smaller than the specified breakpoint.

(1) Basic example: Nav based on ul

Structure

• Navbar nav.navbar.navbar-expand-md (collapses on md breakpoint)
  • Brand
  • Toggler (see Toggler example for detail)
  • Collapsing wrapper div.collapse.navbar-collapse Attribute
    • ID (required) id="navbarNavAltMarkup"
    • Nav ul.navbar-nav
      • For the active item: li.nav-item.active
        • Link a.nav-item.nav-link.active Attribute
          • Attribute href="..."
          • Text (e.g.) Home
          • For screen reader span.sr-only
            • Text (current)
      • Other (normal and disabled) items are the same way as Nav - Base nav

(2) Nav based on div.navbar-nav (can be built with fewer DOM hierarchy)

Structure

(3) With a dropdown

Structure

Forms

Inline forms form.form-inline can be used within a navbar.

(1) Basic example (no toggler)

Structure

• Navbar (no toggler)
  • Inline form form.form-inline
    • Input control input.form-control Attributes
      • Responsive margin .mr-sm-2
      • Attribute type="search"
      • Attribute placeholder="Search"
      • Accessibility attribute aria-label="Search"
    • Outline button button.btn.btn-outline-success Attributes
      • (Responsive) margin .my-2.my-sm-0
      • Attribute type="submit"
      • Text Search

(2) Alignment

Structure

• Set .justify-content-between to the bar (see Flex )
  • Brand
  • Inline form - same as (1) Basic example

(3) Using the input group

Structure

• Navbar (same)
  • Inline form form.form-inline
    • Input group div.input-group
      • Inside: same way as Input group - Basic example

(4) Buttons + sizing

Structure

• Navbar
  • Inline form form.form-inline
    • Outline button button.btn.btn-outline-success Attribute
      • Attribute type="button"
      • Text Main button
    • Small outline button button.btn.btn-sm.btn-outline-secondary Attributes
      • Margin .ml-2 (⇒ Spacing )
      • Attribute type="button"
      • Text Smaller button

Text

Use span.navbar-text for the plain text inside the navbar.

Example (1)

Example (2)

Color schemes

Set both the text color scheme and the background color.

• Text color scheme (one of them required) .navbar-(light|dark)
  • .navbar-light : Text color scheme for bright background
  • .navbar-dark : Text color scheme for dark background
• Background color .bg-(primary|secondary|...)
  • See Colors - Background color
  • Custom style can be also used (e.g.) style="backgroudnd-color: lightblue;"

Examples (based on official document examples)

nav.navbar.navbar-dark.bg-dark

nav.navbar.navbar-dark.bg-primary

nav.navbar.navbar-light + Attribute style="background-color: #e3f2fd;"

Containers

Setting a navbar outside the container (usually as a child of body ) displays as 100% width to the viewport (the example below).

All other navbars in this page are set as children of a container div.container. Their widths are responsive to the viewport and display center-aligned.

The last example looks same as above. But it sets extra padding before a brand on lg or greater.

Structure

• Navbar nav.navbar
  • Togller setting .navbar-expand-lg (expands/collapses with lg breakpoint)
  • Container div.container
    • Text Navbar

A container sets horizontal 15px paddings (gutters) on left and right as default. But a container inside a navbar with a collapted state removes gutters.

• width≥lg (expanded) ⇒ Sets gutters (adds extra 15px spacing before Navbar )
• width<lg (collapsed) ⇒ Removes gutters

Placement

• Default: position: relative
• Fixed top: position: fixed to the top
• Fixed bottom: position: fixed to the bottom
• Sticky top: position: sticky

(1) Default nav.navbar (scrolls relative to the page)

(2) Fixed top nav.navbar.fixed-top

⇒ Demo page

(3) Fixed bottom nav.navbar.fixed-bottom

⇒ Demo page

(4) Sticky top nav.navbar.sticky-top

⇒ Demo page

Responsive behaviors

A navbar acts responsively with a toggler.

• Switchs layouts (expanded/collapsed) with a specific grid breakpoint (lt, md, lg, or xl).
• On expanded, shows all items (brand, nav, text, form, etc.) horizontally in the navbar
• On collapsed, hides items and shows a triple bar icon
  • By clicking an icon, shows(expands) collapted items (stacked vertically)

Toggler

Basic example

Structure

• Navbar nav.navbar.navbar-light.bg-light Attribute
  • Toggler setting .navbar-expand-md (expands/collapses on md breakpoint)
  • Brand a.navbar-brand ...
  • Toggler button.navbar-toggler (displays on collapsed) Attributes
    • Attribute type="button"
    • Attribute data-toggle="collapse"
    • Attribute data-target="#toggler-demo" (sets the collasping wrapper)
    • Accessibility attribute aria-controls="toggler-demo"
    • Accessibility attribute aria-expanded="false"
    • Accessibility attribute aria-label="Toggle navigation"
    • Icon (Triple bar) span.navbar-toggler-icon
  • Collasping wrapper div.collapse.navbar-collapse (displays on expanded) Attribute
    • ID (required) id="toggler-demo"
    • Navigation ul.navbar-nav Attribute
      • (Responsive) margin adjustment .mr-auto.mt-2.mt-md-0
      • Items li.nav-item(.active)
    • Form form.form-inline ...

Toggler breakpoint is specified with .navbar-expand-(sm|md|lg|xl). To set navbar always expanded, use .navbar-expand. The example below is identical to above but replacing .nabvar-expand-md to .nabvar-expand (does not collapse).

Variation (1) Hides brand on collapsed (displays an icon only)

Structure

• Navbar
  • Toggler
  • Collapsing wrapper
    • Brand (moved here)

Variation (2) On collapsed, shows brand on right, icon on left

Structure

• Change DOM order as follows
  • Toggler
  • Brand
  • Collapsing wrapper

Collapsing an external content

Toggler also can be used to expand/collapse a content outside a navbar. See the example below.

Structure

• Collapsing wrapper (outside the bar) div.collapse Attribute
  • ID (required) id="{wrapper-id}"
  • Collapsing content div.bg-dark.p-4
    • Inner text Collapsed content ...
• Navbar nav.navbar.navbar-dark.bg-dark (always collapsed)
  • Toggler button.navbar-toggler Attributes
    • Attribute type="button"
    • Attribute data-toggle="collapse"
    • Attribute data-target="#{wrapper-id}"
    • See Toggler example for other settings
    • Icon (Triple bar) span.navbar-toggler-icon