Navs

Documentation and examples for how to use Bootstrap’s included navigation components.

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

View the official docs here

The base .nav component provides a strong foundation for building all types of navigation components.

Examples

Basic

Home
Link
Active
Disabled

Astro file

---
import { Nav } from 'astro-bootstrap';
import type { NavItemType } from 'astro-bootstrap';
const navs: NavItemType[] = [
  { href: '/', text: 'Home' },
  { href: '#', text: 'Link' },
  { href: '/components/navs', text: 'Active' },
  { href: '/hidden', text: 'Disabled', disabled: true },
];
export interface NavType {
  href: string;
  text: string;
  disabled?: boolean;
}
---

<Nav>
  {navs.map((nav) => <Nav.Item {...nav} />)}
</Nav>