# Navbar

> Bootstrap's powerful, responsive navigation header that includes support for branding, navigation, and more.

Source: https://bootstrap-svelte.vercel.app/components/navbar — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

Here's a complete navbar example with branding, navigation, collapse support and search functionality:

```html
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarSupportedContent">
      <Navbar.Nav class="me-auto mb-2 mb-lg-0">
        <Nav.Item>
          <Nav.Link isActive={true} href="#!">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link isDisabled={true} href="#!">Disabled</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" name="search" placeholder="Search" aria-label="Search" />
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>
```

## Color Schemes

Navbars can use various color schemes by combining Bootstrap background utilities with `data-bs-theme` attributes. You can use the new `colorVariant` prop to automatically apply the correct background color and text contrast.

The `colorVariant` prop supports all Bootstrap background color variants and automatically sets the appropriate `data-bs-theme` attribute based on the background color to ensure proper text contrast as per [Bootstrap documentation](https://getbootstrap.com/docs/5.3/helpers/color-background/#overview).

```html
<!-- Dark theme navbar (dark background with light text) -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-dark" data-bs-theme="dark">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Dark Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarDarkContent">
      <Navbar.Nav class="me-auto mb-2 mb-lg-0">
        <Nav.Item>
          <Nav.Link isActive={true} href="#!">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>

<!-- Primary color navbar using class and data-bs-theme (legacy approach) -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-primary" data-bs-theme="dark">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Primary Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- Primary color navbar using variant (recommended approach) -->
<Navbar.Root expandOnBreakpoint="lg" colorVariant="primary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Primary Navbar with Variant</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>
```

## Containers

Navbars can use various container options to control their horizontal width. Choose from a responsive fixed-width container (default) or a fluid-width container (full width).

```html
<!-- Default container (responsive fixed width) -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Container>
    <Navbar.Brand href="#!">Default Container</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- Fluid container (full width) -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Fluid Container</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- No container -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Navbar.Brand href="#!" class="ms-3">No Container</Navbar.Brand>
  <Navbar.Toggler ariaLabel="Toggle navigation" class="me-3">
    <Navbar.TogglerIcon />
  </Navbar.Toggler>
</Navbar.Root>
```

## Placement

Use the `placement` property to position navbars in different locations within your page.

```html
<!-- Fixed top navbar -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary" placement="fixed-top">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Fixed Top</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- Fixed bottom navbar -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary" placement="fixed-bottom">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Fixed Bottom</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- Sticky top navbar -->
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary" placement="sticky-top">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Sticky Top</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>
```

## Scrolling

Add `isVerticalScrolling=true` to a `Navbar.Nav` component to enable vertical scrolling within the toggleable contents of a collapsed navbar.

```html
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Navbar Scroll</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarScroll">
      <Navbar.Nav class="me-auto mb-2 mb-lg-0" isVerticalScrolling={true} style="--bs-scroll-height: 100px;">
        <Nav.Item>
          <Nav.Link isActive={true} href="#!">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 3</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 4</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 5</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link 6</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>
```

## Text

Add non-navigational text to your navbar with `Navbar.Text` component.

```html
<Navbar.Root expandOnBreakpoint="lg" class="bg-body-tertiary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Navbar</Navbar.Brand>
    <Navbar.Text>
      Navbar text with an inline element
    </Navbar.Text>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarText">
      <Navbar.Nav class="me-auto mb-2 mb-lg-0">
        <Nav.Item>
          <Nav.Link isActive={true} href="#!">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Features</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Pricing</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
      <Navbar.Text>
        Signed in as: <a href="#!">Mark Otto</a>
      </Navbar.Text>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>
```

## Variant

Use the `colorVariant` prop to apply predefined color themes to your navbar. This prop automatically handles the theme attributes for you.

```html
<!-- Using variant prop for automatic theme handling -->
<Navbar.Root expandOnBreakpoint="lg" colorVariant="primary">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Primary Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarVariantContent">
      <Navbar.Nav class="me-auto mb-2 mb-lg-0">
        <Nav.Item>
          <Nav.Link isActive={true} href="#!">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link href="#!">Link</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>

<!-- Using variant prop with other colors -->
<Navbar.Root expandOnBreakpoint="lg" colorVariant="success">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Success Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>

<!-- Light colored navbar with variant -->
<Navbar.Root expandOnBreakpoint="lg" colorVariant="light">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Light Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
  </Container>
</Navbar.Root>
```

## Offcanvas

Transform your navbar with an offcanvas component that displays navigation content when the navbar is collapsed or expanded.

`Navbar.Toggler` automatically receives `aria-controls` while the nested `Offcanvas.Root` is rendered, including when the panel uses a generated ID. The association follows ID changes and is removed when the panel leaves the DOM after closing. When multiple controlled panels are rendered, their IDs are listed together. An explicit `aria-controls` on the toggler takes precedence.

**Responsive Behavior:** The offcanvas content will automatically show when the navbar expands at the XL breakpoint, creating a seamless responsive navigation experience.

```html
<Navbar.Root expandOnBreakpoint="xl" class="bg-body-tertiary">
    <Container isFluid={true}>
        <Navbar.Brand href="#!">Navbar</Navbar.Brand>
        <Navbar.Toggler ariaLabel="Toggle navigation">
            <Navbar.TogglerIcon />
        </Navbar.Toggler>
        <Offcanvas.Root placement="end" useBackdrop={true}>
            <Offcanvas.Header isDismissible={true}>
                <Offcanvas.Title>Offcanvas in a Navbar</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                <Navbar.Nav class="justify-content-end flex-grow-1 pe-3">
                    <Nav.Item>
                        <Nav.Link isActive={true} href="#!">Home</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link href="#!">Link</Nav.Link>
                    </Nav.Item>
                </Navbar.Nav>
                <form class="d-flex mt-3" role="search">
                    <input class="form-control me-2" type="search" name="search" placeholder="Search" aria-label="Search" />
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </Offcanvas.Body>
        </Offcanvas.Root>
    </Container>
</Navbar.Root>
```

## API Reference

### Navbar.Root Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `expandOnBreakpoint` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| false` | `'xs'` | Minimum breakpoint at which the navbar expands. Omitted or `xs` means always expanded inline. Use `false` for a toggler at every width. Changes apply immediately. |
| `id` | `string` | Auto-generated | Unique identifier for the navbar |
| `placement` | `'fixed-top' \| 'fixed-bottom' \| 'sticky-top' \| 'sticky-bottom'` | `undefined` | Controls the positioning of the navbar within the page |
| `colorVariant` | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark'` | - | Background color variant for the navbar. Automatically applies the appropriate `data-bs-theme` attribute for proper text contrast. |

### Navbar.Brand Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `href` | `string` | `'#!'` | URL for the brand link |
| `id` | `string` | Auto-generated | Unique identifier for the brand |

### Navbar.Toggler Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `ariaLabel` | `string` | `'Toggle navigation'` | Accessibility label for the toggler button |
| `aria-controls` | `string` | Rendered panel IDs | Automatically lists the IDs of rendered Navbar.Collapse and nested Offcanvas.Root panels, separated by spaces, and follows their ID changes. An explicit value overrides the automatic association. Omitted when no target ID or override is available. |
| `aria-expanded` | `boolean` | Navbar expansion state | Managed by the Navbar state, together with the toggler's collapsed class. Consumer values do not override it. |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | Auto-generated | Unique identifier for the toggler |
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type attribute will be forced to 'button' |

### Navbar.TogglerIcon Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |

### Navbar.Collapse Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | Auto-generated | Unique identifier for the collapse container (required for accessibility) |
| `onCollapse` | `EventCallback` | - | Callback when collapse starts |
| `onCollapsed` | `EventCallback` | - | Callback when collapse finishes |
| `onExpand` | `EventCallback` | - | Callback when expand starts |
| `onExpanded` | `EventCallback` | - | Callback when expand finishes |

### Navbar.Nav Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | Auto-generated | Unique identifier for the nav |
| `isVerticalScrolling` | `boolean` | `false` | Enable vertical scrolling within the nav |

### Navbar.Text Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | - | Additional CSS classes to apply to the component |
| `elementRef` | `HTMLElement \| null` | `null` | Reference to the DOM element |
| `id` | `string` | Auto-generated | Unique identifier for the text |

### CSS Classes

The component applies Bootstrap's navbar classes based on the provided props:

- `navbar` - Base class for the Navbar component
- `navbar-expand` - Always inline when the breakpoint is omitted or `xs`
- `navbar-expand-*` - Applied for named responsive breakpoints; neither expansion class is used for `false`
- `navbar-brand` - Applied to Navbar.Brand components
- `navbar-nav` - Applied to Navbar.Nav components
- `navbar-text` - Applied to Navbar.Text components
- `navbar-toggler` - Applied to Navbar.Toggler components
- `navbar-toggler-icon` - Applied to Navbar.TogglerIcon components
- `navbar-collapse` - Applied to Navbar.Collapse components
- `collapse` - Applied to Navbar.Collapse components
- `navbar-scrolling` - Applied when isVerticalScrolling=true on Navbar.Nav

### Responsive Behavior

Choose an expansion breakpoint to make navigation collapse on smaller screens:

- Use `expandOnBreakpoint={false}` to keep navigation collapsible at every width, or to render a plain wrapping navbar without responsive expansion classes.
- At smaller screen sizes (below the specified breakpoint), the navbar collapses and requires the toggler button to expand.
- At larger screen sizes (at or above the specified breakpoint), the navbar content displays horizontally.
- Use `expandOnBreakpoint="lg"`, for example, to collapse below 992px. The breakpoint can change without remounting.
- Omitting the prop or choosing `xs` keeps navigation expanded at every width, using Bootstrap's `navbar-expand` class.
- An inheriting Offcanvas follows the same breakpoint. In inline mode it has no backdrop or body-scroll lock, including on phones with `xs`.
- A menu opened with the toggler resets after entering inline mode. Explicit Offcanvas `isShown` assignments survive responsive changes until a later toggle, dismissal, or changed prop replaces them. An unchanged prop is not reapplied; to reopen after dismissal, change `isShown` to false and then true.