# Navbar A powerful, responsive navigation header with support for branding, navigation, forms, and collapsing content. ```twig
Navbar
``` ## Installation ```shell php bin/console ux:install navbar --kit bootstrap ``` ## Usage ```twig
Navbar
``` ## Accessibility The component renders a native `nav` landmark. When a page contains multiple navigation landmarks, give each one a distinct accessible name with the `label` prop or an `aria-labelledby` attribute. Mark the active link with `aria-current="page"`. Every toggler must expose `aria-controls`, `aria-expanded`, and a meaningful accessible label. When external content opens before its toggler in the document, move focus programmatically when needed. ## Examples ### Supported content Compose branding, navigation, dropdowns, forms, togglers, and collapsing content inside one responsive navbar. ```twig
Navbar
``` ### Brand Use text, headings, images, or image-and-text combinations for the navbar brand. ```twig
Navbar
Navbar
Bootstrap
``` ### Nav Build navigation from lists, direct links, or dropdown items, and mark the current page explicitly. ```twig
Navbar
Navbar
Navbar
``` ### Forms Place search forms, input groups, and button groups inside navbars. ```twig
Navbar
@
``` ### Text Use `navbar-text` for vertically aligned text alongside navigation content. ```twig
Navbar text with an inline element
Navbar w/ text
``` ### Color schemes Use `data-bs-theme` through the `theme` prop and combine it with background utilities or custom colors. ```twig
Navbar
Home Features Pricing
Navbar
Home Features Pricing
Navbar
Home Features Pricing
``` ### Containers Wrap a navbar in a container, or choose a responsive inner container to constrain its content. ```twig
Navbar
Navbar
``` ### Default placement Keep the navbar in the normal document flow. ```twig
Default
``` ### Fixed top Fix the navbar to the top of the viewport and account for the removed document-flow space. ```twig
Fixed top
``` ### Fixed bottom Fix the navbar to the bottom of the viewport. ```twig
Fixed bottom
``` ### Sticky top Keep the navbar at the top after it reaches that edge while scrolling. ```twig
Sticky top
``` ### Sticky bottom Keep the navbar at the bottom after it reaches that edge while scrolling. ```twig
Sticky bottom
``` ### Scrolling Limit collapsed navigation height with `navbar-nav-scroll` and `--bs-scroll-height`. ```twig
Navbar scroll
``` ### Toggler Place the responsive toggler before or after the brand to control its alignment. ```twig
Navbar
Navbar
``` ### External content Target collapsible content that sits outside the navbar while keeping the ARIA relationship explicit. ```twig
``` ### Offcanvas Use an offcanvas drawer for a navbar that remains collapsed at every breakpoint. ```twig
Offcanvas navbar
``` ### Responsive offcanvas Expand the offcanvas navigation into a regular navbar at a selected breakpoint. ```twig
Offcanvas navbar
``` ### Dark offcanvas Keep the navbar, drawer, close button, and dropdown menu aligned with a dark theme. ```twig
Offcanvas dark navbar
Dark offcanvas
 ``` ## API Reference ### `` | Prop | Type | Default | Description | |:-----|:-----|:--------|:------------| | `expand` | `'always'\|'sm'\|'md'\|'lg'\|'xl'\|'xxl'\|null` | `null` | The breakpoint at which the navbar expands. | | `background` | `string\|null` | `'body-tertiary'` | The Bootstrap background utility suffix. | | `theme` | `'light'\|'dark'\|null` | `null` | The component-specific Bootstrap color mode. | | `label` | `string\|null` | `null` | The accessible name for the navigation landmark. | | Block | Description | |:------|:------------| | `content` | The navbar brand, navigation, forms, togglers, and collapsible content. |