Navigation
Build semantic headers, vertical navigation, breadcrumb trails, and previous/next page navigation with Boobstrap components.
Navigation
Boobstrap provides complementary navigation patterns for application headers, vertical link groups, breadcrumb trails, and previous/next article links. Use the dedicated Sidebar component when navigation becomes an application shell, drawer, or collapsible rail.
<header class="bs-navbar">
<a class="bs-navbar-brand" href="/">Acme</a>
<button class="bs-navbar-toggle" data-bs-toggle="navbar" aria-controls="primary-menu" aria-label="Toggle navigation">…</button>
<div class="bs-navbar-menu" id="primary-menu" data-bs-navbar data-bs-state="closed" aria-label="Primary navigation">
<nav class="bs-navbar-nav" aria-label="Primary"><a class="bs-navbar-link" href="#features" data-bs-navbar-close>Features</a></nav>
<div class="bs-navbar-actions"><a class="bs-btn bs-btn-primary" href="/signup">Get started</a></div>
</div>
</header>
<button class="bs-navbar-backdrop" data-bs-navbar-dismiss aria-controls="primary-menu" aria-label="Close navigation"></button>Choose a pattern
Use the navbar for a global header, a vertical nav for a short destination list, breadcrumbs for hierarchy, and page navigation for a linear reading sequence. Use Sidebar for an application rail or drawer.
Current state
Add aria-current="page" to the current destination. Do not rely on color or font weight alone to communicate which page is active.
Landmarks
Keep destinations as real links. Give each <nav> a distinct accessible label when the page contains multiple navigation landmarks.
Grouped vertical navigation
Use grouped navigation for persistent sidebars. Mark the current destination with aria-current and indent only true child destinations.
<nav class="bs-nav" aria-label="Project navigation">
<div class="bs-nav-group">
<p class="bs-nav-heading">Workspace</p>
<a class="bs-nav-link" href="#navbar" aria-current="page">Overview</a>
<a class="bs-nav-link bs-nav-link-subitem" href="#navbar">Members</a>
<a class="bs-nav-link bs-nav-link-subitem" href="#navbar">Settings</a>
</div>
<div class="bs-nav-group">
<p class="bs-nav-heading">Resources</p>
<a class="bs-nav-link" href="#navbar">Documentation</a>
</div>
</nav>Breadcrumb trail
Breadcrumbs show the current page's position in a hierarchy. Keep the final item as plain text and identify the landmark with an accessible label.
<nav class="bs-breadcrumb" aria-label="Breadcrumb">
<a href="/docs">Docs</a>
<span aria-hidden="true">/</span>
<a href="/docs/components">Components</a>
<span aria-hidden="true">/</span>
<span aria-current="page">Navigation</span>
</nav>Previous and next page navigation
Place page navigation after the article so readers can continue in either direction without returning to the sidebar.
<nav class="bs-page-nav" aria-label="Documentation pages">
<a class="bs-page-nav-link" href="/docs/components/cards">
<span class="bs-page-nav-context">Previous</span>
<span class="bs-page-nav-title">Cards</span>
</a>
<a class="bs-page-nav-link" href="/docs/components/tables">
<span class="bs-page-nav-context">Next</span>
<span class="bs-page-nav-title">Tables</span>
</a>
</nav>Behavior layers
Choose exactly one owner for a navbar instance. Every layer uses the same open/closed presentation states and lifecycle event names.
import { Navbar } from "@boobstrap/boobstrap/js/navbar";
const navbar = Navbar.getOrCreateInstance(document.querySelector("[data-bs-navbar]"));
navbar.show();
navbar.hide();<header class="bs-navbar" x-data="bsNavbar">
<button class="bs-navbar-toggle" x-bind="trigger" aria-controls="menu">Menu</button>
<div class="bs-navbar-menu" id="menu" x-ref="navbar" x-bind="menu">…</div>
<button class="bs-navbar-backdrop" x-bind="dismiss" aria-label="Close navigation"></button>
</header>import { useNavbar } from "@boobstrap/react";
const navbar = useNavbar({ id: "primary-menu" });
return <><button {...navbar.getTriggerProps()}>Menu</button><div className="bs-navbar-menu" {...navbar.getMenuProps()}>…</div><button className="bs-navbar-backdrop" {...navbar.getDismissProps()} /></>;import { useNavbar } from "@boobstrap/vue";
const navbar = useNavbar({ id: "primary-menu" });
// Bind navbar.getTriggerProps(), getMenuProps(), and getDismissProps().Responsive semantics
The core controller applies dialog semantics only below the configured media query and returns the menu to ordinary navigation on desktop.
Selection dismissal
Add data-bs-navbar-close to destinations that should close the mobile menu without restoring focus to the toggle.
One behavior owner
Do not initialize core JavaScript on markup already controlled by Alpine, React, or Vue.
Navigation class API
The navigation presentation remains CSS-first. Add data-bs-navbar to opt a menu into the responsive controller, or use the matching bsNavbar, useNavbar, or useNavbar adapter API when Alpine, React, or Vue owns state.
| Class | Purpose |
|---|---|
.bs-navbar | Aligns the brand, navigation, and menu control in a full-width header row. |
.bs-navbar-brand | Styles the product or site identity link. |
.bs-navbar-link | Styles navigation destinations with hover and current-page states. |
.bs-navbar-toggle | Provides an icon-sized menu control with visible interaction states. |
.bs-navbar-menu / .bs-navbar-nav / .bs-navbar-actions | Compose inline desktop navigation and the responsive off-canvas menu. |
.bs-navbar-backdrop / .bs-navbar-open | Provide mobile dismissal and document scroll locking while the menu is open. |
.bs-nav | Creates a vertical navigation stack with consistent spacing. |
.bs-nav-group | Groups related destinations and separates adjacent groups. |
.bs-nav-heading | Styles a non-interactive label for a navigation group. |
.bs-nav-link | Styles a vertical destination and its aria-current state. |
.bs-nav-link-subitem | Indents a destination that is conceptually nested under another item. |
.bs-breadcrumb | Arranges a compact hierarchy trail with wrapping and muted separators. |
.bs-page-nav | Lays out previous and next article links in a responsive pair. |
.bs-page-nav-link | Creates a bordered page destination with hover and focus treatment. |
.bs-page-nav-context | Styles the short directional label, such as “Previous” or “Next.” |
.bs-page-nav-title | Styles the destination page title as the primary link text. |