Navbar

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

Examples

Basic

<Navbar.Items> is a helper component which iterates over an array of NavbarItemType objects and generates the required elements. Alternatively see the manual implementation lower down.

Astro file

---
import { Navbar } from 'astro-bootstrap';
import type { NavbarItemType } from 'astro-bootstrap';
// demonstration data
const siteTitle = 'Astro site'; // pull this in from a config file
const items: NavbarItemType[] = [
  // pull this in from a config file
  { text: 'Home', href: '#' },
  { text: 'About', href: '#' },
  {
    text: 'Dropdown',
    subItems: [
      { text: 'First child', href: '#' },
      { divider: true },
      { text: 'Second child', href: '#' },
    ],
  },
];

const id = 'navbarDemo';
---

<Navbar class="navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">{siteTitle}</a>
    <Navbar.Toggler controls={id} />
    <Navbar.Collapse {id}>
      <Navbar.Items {items} class="me-auto mb-2 mb-lg-0" />
    </Navbar.Collapse>
  </div>
</Navbar>

API

Navbar.Toggler

import { Navbar } from 'astro-bootstrap'

Name	Type	Default	Description
controls ^required	string		Must be the same as the `id` property of the `<Navbar.Collapse />` component.

Navbar.Collapse

import { Navbar } from 'astro-bootstrap'

Name	Type	Default	Description
id ^required	string		Must be the same as the `contols` property of the `<Navbar.Toggler />` component.

Navbar.Dropdown

import { Navbar } from 'astro-bootstrap'

Name	Type	Default	Description
title ^required	string		Set the `innerText` for the dropdown menu item.
children ^required	array of objects		See below for object properties