Dropdowns

Toggle the visibility of content across your project with a few classes and a Bootstrap JS plugin.

View the official docs here

Examples

Basic

You can keep your code dry by generating dropdown items with map. When a dropdown is used inside a <Nav> component, make sure you enable the nav option.

Astro file 
---
import { Dropdown, Button } from 'astro-bootstrap';
import type { DropdownItemType } from 'astro-bootstrap';
const items: DropdownItemType[] = [
  {
    text: 'Action',
    href: '#',
  },
  {
    text: 'Another action',
    href: '#',
  },
  {
    text: 'Something else here',
    href: '#',
  },
];
---

<Dropdown>
  <Button variant="secondary" dropdown>Dropdown button</Button>
  <Dropdown.Menu>
    {
      items.map((item) => (
        <Dropdown.Item href={item.href}>{item.text}</Dropdown.Item>
      ))
    }
  </Dropdown.Menu>
</Dropdown>

API

Button (with dropdown option)