Dropdown

Basic

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary">Dropdown button</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
    <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
    <c-bs-dropdown-item href="#">Something else here</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Primary

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="primary">Primary</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Success

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="success">Success</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Danger

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="danger">Danger</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Warning

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="warning">Warning</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Info

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="info">Info</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Light

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="light">Light</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Variant Dark

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="dark">Dark</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Size Large

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary" size="lg">Large button</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Size Small

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary" size="sm">Small button</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Dropup

<c-bs-dropdown direction="up">
  <c-bs-dropdown-toggle variant="secondary">Dropup</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Dropend

<c-bs-dropdown direction="end">
  <c-bs-dropdown-toggle variant="secondary">Dropend</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Dropstart

<c-bs-dropdown direction="start">
  <c-bs-dropdown-toggle variant="secondary">Dropstart</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Centered

<c-bs-dropdown c-centered="True">
  <c-bs-dropdown-toggle variant="secondary">Centered dropdown</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Centered Dropup

<c-bs-dropdown direction="up" c-centered="True">
  <c-bs-dropdown-toggle variant="secondary">Centered dropup</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary">Right-aligned menu</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu align="end">
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary">Left-aligned, lg-right</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu align_lg="end">
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary">Right-aligned, lg-left</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu align="end" align_lg="start">
    <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Auto Close True

<c-bs-dropdown auto_close="true">
  <c-bs-dropdown-toggle variant="secondary">Default dropdown</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Menu item</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Auto Close False

<c-bs-dropdown auto_close="false">
  <c-bs-dropdown-toggle variant="secondary">Manual close</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Menu item</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Auto Close Inside

<c-bs-dropdown auto_close="inside">
  <c-bs-dropdown-toggle variant="secondary">Clickable inside</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Menu item</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Auto Close Outside

<c-bs-dropdown auto_close="outside">
  <c-bs-dropdown-toggle variant="secondary">Clickable outside</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu>
    <c-bs-dropdown-item href="#">Menu item</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

Dark Dropdown

<c-bs-dropdown>
  <c-bs-dropdown-toggle variant="secondary">Dropdown button</c-bs-dropdown-toggle>
  <c-bs-dropdown-menu c-dark="True">
    <c-bs-dropdown-item href="#" c-active="True">Action</c-bs-dropdown-item>
    <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
    <c-bs-dropdown-item href="#">Something else here</c-bs-dropdown-item>
    <c-bs-dropdown-divider />
    <c-bs-dropdown-item href="#">Separated link</c-bs-dropdown-item>
  </c-bs-dropdown-menu>
</c-bs-dropdown>

Preview:

With Divider

<c-bs-dropdown-menu>
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Something else here</c-bs-dropdown-item>
  <c-bs-dropdown-divider />
  <c-bs-dropdown-item href="#">Separated link</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview:

With Header

<c-bs-dropdown-menu>
  <c-bs-dropdown-header>Dropdown header</c-bs-dropdown-header>
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview:

With Text

<c-bs-dropdown-menu>
  <c-bs-dropdown-item-text>Dropdown item text</c-bs-dropdown-item-text>
  <c-bs-dropdown-item href="#">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another action</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview:

Active Item

<c-bs-dropdown-menu>
  <c-bs-dropdown-item href="#">Regular link</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#" c-active="True">Active link</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another link</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview:

Disabled Item

<c-bs-dropdown-menu>
  <c-bs-dropdown-item href="#">Regular link</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#" c-disabled="True">Disabled link</c-bs-dropdown-item>
  <c-bs-dropdown-item href="#">Another link</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview:

Button Items

<c-bs-dropdown-menu>
  <c-bs-dropdown-item as_="button">Action</c-bs-dropdown-item>
  <c-bs-dropdown-item as_="button">Another action</c-bs-dropdown-item>
  <c-bs-dropdown-item as_="button">Something else here</c-bs-dropdown-item>
</c-bs-dropdown-menu>

Preview: