Nav

The base .nav component is built with flexbox and provides a strong foundation for building all types of navigation components. It includes style overrides for working with lists, link padding for larger hit areas, and basic disabled styling.

Examples

Tabs, and the Navbar it's most often paired with.

TabsNavbar

Usage

A standalone tabbed nav — the tab_content slot holds one pane per nav item, in the same order:

{% include 'bootstrap_components:nav' with {
  variant: 'tabs',
  nav_type: 'ul',
  items: [
    { url: '#home', title: 'Home', link_attributes: { class: ['active'] } },
    { url: '#profile', title: 'Profile' },
    { url: '#contact', title: 'Contact' },
  ],
  tab_content: [
    '<p>Home tab content.</p>',
    '<p>Profile tab content.</p>',
    '<p>Contact tab content.</p>',
  ],
} %}

A full Navbar with a Navbar Nav filling its collapsible navigation slot.

Usage

{% embed 'bootstrap_components:navbar' with {
  variant: 'expand_lg',
  toggler_position: 'end',
  navbar_id: 'navbarDemo',
} %}
  {% block brand %}
    <a class="navbar-brand" href="/">Brand</a>
  {% endblock %}
  {% block navigation_collapsible %}
    {% include 'bootstrap_components:navbar_nav' with {
      attributes: { class: ['me-auto', 'mb-2', 'mb-lg-0'] },
      items: [
        { url: '/', title: 'Home', link_attributes: { class: ['active'] } },
        { url: '/features', title: 'Features' },
        { url: '/pricing', title: 'Pricing' },
        { title: 'Dropdown', below: [
          { url: '/', title: 'Action' },
          { url: '/', title: 'Another action' },
          {},
          { url: '/', title: 'Something else here' },
        ] },
      ],
    } %}
  {% endblock %}
{% endembed %}

Props

Prop	Type	Description	Example
variant	string	default, tabs, pills or underline, optionally with __fill or __justified. Defaults to default.	default
vertical	boolean	Stack the items in a column.	false
nav_id	string	Must start with a letter. Randomly generated if empty.
nav_type	string	List tag: ul or nav.	ul
card_header	boolean	Styling adjustment for tabs/pills variants used in a card header.	false
items	array	Nav items — each with url, title, active, attributes, link_attributes, and an optional below array for a nested dropdown.	[{url: '/home', title: 'Active'}]

Slots

Slot	Description
tab_content	Tab pane content. Each item maps to a nav link above — the number of panes must match the number of nav items.

Variants

Variant	Description
default	Plain nav, no styling.
tabs	Bootstrap tabs.
tabs__fill	Tabs filled to the available width.
tabs__justified	Tabs filled with equal-width items.
pills	Pill-style nav.
pills__fill	Pills filled to the available width.
pills__justified	Pills filled with equal-width items.
underline	Underlined nav links.

Navbar

Powerful, responsive navigation header. Includes support for branding, navigation, and the collapse plugin.

Props

Prop	Type	Description	Example
navbar_id	string	Must start with a letter. Randomly generated if empty.	navbar-1
toggler_position	string	start, end, or none.	start
toggle_action	string	collapse (default) or offcanvas.	collapse
offcanvas_position	string	start or end — only used when toggle_action is offcanvas.	end
placement	string	default, fixed-top, fixed-bottom, sticky-top, or sticky-bottom.	default

Slots

Slot	Description
brand	The .navbar-brand content.
navigation	Navigation elements shown even on small screens.
navigation_collapsible	Navigation elements (menu links, etc.) shown in the collapsible drawer on small screens — usually a Navbar Nav.
offcanvas_label	Label used when toggle_action is offcanvas.

Navbar Nav

Navigation list. Drop into a Navbar's navigation_collapsible slot.

Props

Prop	Type	Description	Example
items	array	Menu items, same shape as Nav's items (supports nested below dropdowns).	[{url: '/home', title: 'Home'}]

---

View on getbootstrap.com