Skip to main content
Components
Navbar
pnpm add @winkintel/bootstrap-svelte
GitHub

Navbar

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

Playground

Experiment with the Navbar component by adjusting the props below:

Interactive Playground

Controls

Preview

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Code

            
            <Navbar.Root
  expandOnBreakpoint="lg">
  <Container isFluid={true}>
    <Navbar.Brand href="#!">Navbar</Navbar.Brand>
    <Navbar.Toggler ariaLabel="Toggle navigation">
      <Navbar.TogglerIcon />
    </Navbar.Toggler>
    <Navbar.Collapse id="navbarContent">
      <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>
        <Nav.Item>
          <Nav.Link href="#!" isDisabled={true}>Disabled</Nav.Link>
        </Nav.Item>
      </Navbar.Nav>
    </Navbar.Collapse>
  </Container>
</Navbar.Root>

Basic Example

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

            
            <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.

            
            <!-- 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).

Default container (responsive fixed width):
Fluid container (full width):
No container: 
            
            <!-- 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.

The following placement options are available:

  • fixed-top - Fixes the navbar at the top of the viewport
  • fixed-bottom - Fixes the navbar at the bottom of the viewport
  • sticky-top - Makes the navbar stick to the top when scrolling past it
  • sticky-bottom - Makes the navbar stick to the bottom when scrolling past it
These examples are not rendered here to avoid interfering with the page layout.
            
            <!-- 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.

            
            <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.

            
            <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.

            
            <!-- 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.

Responsive Behavior: The offcanvas content will automatically show when the navbar expands at the XL breakpoint, creating a seamless responsive navigation experience.
            
            <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

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
expandOnBreakpoint'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl''xs'Breakpoint at which the navbar expands
idstringAuto-generatedUnique identifier for the navbar
placement'fixed-top' | 'fixed-bottom' | 'sticky-top' | 'sticky-bottom'undefinedControls 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

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
hrefstring'#!'URL for the brand link
idstringAuto-generatedUnique identifier for the brand

Navbar.Toggler Props

NameTypeDefaultDescription
ariaLabelstring'Toggle navigation'Accessibility label for the toggler button
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
idstringAuto-generatedUnique identifier for the toggler
type'button' | 'submit' | 'reset''button'Button type attribute will be forced to 'button'

Navbar.TogglerIcon Props

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element

Navbar.Collapse Props

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
idstringAuto-generatedUnique identifier for the collapse container (required for accessibility)
onCollapseEventCallback-Callback when collapse starts
onCollapsedEventCallback-Callback when collapse finishes
onExpandEventCallback-Callback when expand starts
onExpandedEventCallback-Callback when expand finishes

Navbar.Nav Props

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
idstringAuto-generatedUnique identifier for the nav
isVerticalScrollingbooleanfalseEnable vertical scrolling within the nav

Navbar.Text Props

NameTypeDefaultDescription
classstring-Additional CSS classes to apply to the component
elementRefHTMLElement | nullnullReference to the DOM element
idstringAuto-generatedUnique 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-* - Applied based on expandOnBreakpoint
  • 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

Navbars are responsive by default:

  • 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 the expandOnBreakpoint prop to configure where this happens.