Dropdown

A Bootstrap dropdown: a toggle and a menu of items, built from sub-components. It needs tabler.js.

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle variant="primary">Actions</twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu>
        <twig:Tabler:Dropdown:Header>Invoice #1042</twig:Tabler:Dropdown:Header>
        <twig:Tabler:Dropdown:Item href="/invoices/1042/edit">Edit</twig:Tabler:Dropdown:Item>
        <twig:Tabler:Dropdown:Item href="/invoices/1042/duplicate">Duplicate</twig:Tabler:Dropdown:Item>
        <twig:Tabler:Dropdown:Divider />
        <twig:Tabler:Dropdown:Item href="/invoices/1042/delete" class="text-danger">Delete</twig:Tabler:Dropdown:Item>
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Actions
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-header">Invoice #1042</div>
        <a href="/invoices/1042/edit" class="dropdown-item">Edit</a>
        <a href="/invoices/1042/duplicate" class="dropdown-item">Duplicate</a>
        <div class="dropdown-divider"></div>
        <a href="/invoices/1042/delete" class="dropdown-item text-danger">Delete</a>
    </div>
</div>

Toggle

The toggle is a <button type="button">, so it never submits an enclosing form. Without variant, it is a plain .btn. noCaret hides the caret, for an icon-only toggle:

<div class="btn-list">
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Plain</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle variant="secondary">Secondary</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle noCaret="{{ true }}" class="btn-icon" aria-label="More actions">
            <twig:Tabler:Icon name="dots-vertical" class="icon" />
        </twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
</div>

<div class="btn-list">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Plain</button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Archive</a>
        </div>
    </div>
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Secondary
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Archive</a>
        </div>
    </div>
    <div class="dropdown">
        <button
            type="button"
            class="btn btn-icon"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            aria-label="More actions"
        >
            <i class="ti ti-dots-vertical icon"></i>
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Archive</a>
        </div>
    </div>
</div>

Split button

split makes the toggle the caret-only half of a split button: put it after a Button in a ButtonGroup, followed by the menu. Give it an aria-label:

<twig:Tabler:ButtonGroup aria-label="Save options">
    <twig:Tabler:Button variant="primary">Save</twig:Tabler:Button>
    <twig:Tabler:Dropdown:Toggle variant="primary" split="{{ true }}" aria-label="More save options" />
    <twig:Tabler:Dropdown:Menu>
        <twig:Tabler:Dropdown:Item href="/invoices/1042/save-draft" icon="file-pencil">Save as draft</twig:Tabler:Dropdown:Item>
        <twig:Tabler:Dropdown:Item href="/invoices/1042/save-send" icon="send">Save and send</twig:Tabler:Dropdown:Item>
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:ButtonGroup>

<div class="btn-group" role="group" aria-label="Save options">
    <button type="button" class="btn btn-primary">Save</button>
    <button
        type="button"
        class="btn btn-primary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown"
        aria-expanded="false"
        aria-label="More save options"
    ></button>
    <div class="dropdown-menu">
        <a href="/invoices/1042/save-draft" class="dropdown-item">
            <i class="ti ti-file-pencil dropdown-item-icon"></i>
            Save as draft
        </a>
        <a href="/invoices/1042/save-send" class="dropdown-item">
            <i class="ti ti-send dropdown-item-icon"></i>
            Save and send
        </a>
    </div>
</div>

end aligns the menu with the end of the toggle, for a toggle on the right of the page:

<div class="d-flex justify-content-end">
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Jane Doe</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu end="{{ true }}">
            <twig:Tabler:Dropdown:Item href="/profile">Profile</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item href="/settings">Settings</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Divider />
            <twig:Tabler:Dropdown:Item href="/logout">Sign out</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
</div>

<div class="d-flex justify-content-end">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Jane Doe
        </button>
        <div class="dropdown-menu dropdown-menu-end">
            <a href="/profile" class="dropdown-item">Profile</a>
            <a href="/settings" class="dropdown-item">Settings</a>
            <div class="dropdown-divider"></div>
            <a href="/logout" class="dropdown-item">Sign out</a>
        </div>
    </div>
</div>

Direction

direction sets where the menu opens: up (dropup), end (dropend) or start (dropstart). The menu flips to the other side when there is no room:

<div class="d-flex flex-column align-items-center gap-5">
    <div class="btn-list">
        <twig:Tabler:Dropdown direction="start">
            <twig:Tabler:Dropdown:Toggle>Dropstart</twig:Tabler:Dropdown:Toggle>
            <twig:Tabler:Dropdown:Menu>
                <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
            </twig:Tabler:Dropdown:Menu>
        </twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown direction="end">
            <twig:Tabler:Dropdown:Toggle>Dropend</twig:Tabler:Dropdown:Toggle>
            <twig:Tabler:Dropdown:Menu>
                <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
            </twig:Tabler:Dropdown:Menu>
        </twig:Tabler:Dropdown>
    </div>
    <twig:Tabler:Dropdown direction="up">
        <twig:Tabler:Dropdown:Toggle>Dropup</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu>
            <twig:Tabler:Dropdown:Item>Edit</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item>Archive</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
</div>

<div class="d-flex flex-column align-items-center gap-5">
    <div class="btn-list">
        <div class="dropdown dropstart">
            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropstart
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Edit</a>
                <a href="#" class="dropdown-item">Archive</a>
            </div>
        </div>
        <div class="dropdown dropend">
            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Dropend
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Edit</a>
                <a href="#" class="dropdown-item">Archive</a>
            </div>
        </div>
    </div>
    <div class="dropdown dropup">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropup
        </button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Edit</a>
            <a href="#" class="dropdown-item">Archive</a>
        </div>
    </div>
</div>

Dropdowns do not nest into submenus: Dropdown:Toggle is a button (.btn), not the .dropdown-item a submenu trigger needs.

arrow adds a small arrow pointing at the toggle, dark a dark menu on a light page, and scrollable caps the menu height and scrolls the rest:

<div class="btn-list">
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Arrow</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu arrow="{{ true }}">
            <twig:Tabler:Dropdown:Item href="/profile">Profile</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item href="/settings">Settings</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Dark</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu dark="{{ true }}">
            <twig:Tabler:Dropdown:Item href="/profile">Profile</twig:Tabler:Dropdown:Item>
            <twig:Tabler:Dropdown:Item href="/settings">Settings</twig:Tabler:Dropdown:Item>
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown>
        <twig:Tabler:Dropdown:Toggle>Scrollable</twig:Tabler:Dropdown:Toggle>
        <twig:Tabler:Dropdown:Menu scrollable="{{ true }}">
            {% for country in ['Austria', 'Belgium', 'Denmark', 'Finland', 'France', 'Germany', 'Ireland', 'Italy', 'Netherlands', 'Portugal', 'Spain', 'Sweden'] %}
                <twig:Tabler:Dropdown:Item href="?country={{ country|lower }}">{{ country }}</twig:Tabler:Dropdown:Item>
            {% endfor %}
        </twig:Tabler:Dropdown:Menu>
    </twig:Tabler:Dropdown>
</div>

<div class="btn-list">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Arrow</button>
        <div class="dropdown-menu dropdown-menu-arrow">
            <a href="/profile" class="dropdown-item">Profile</a>
            <a href="/settings" class="dropdown-item">Settings</a>
        </div>
    </div>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dark</button>
        <div class="dropdown-menu dropdown-menu-dark">
            <a href="/profile" class="dropdown-item">Profile</a>
            <a href="/settings" class="dropdown-item">Settings</a>
        </div>
    </div>
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Scrollable
        </button>
        <div class="dropdown-menu dropdown-menu-scrollable">
            <a href="?country=austria" class="dropdown-item">Austria</a>
            <a href="?country=belgium" class="dropdown-item">Belgium</a>
            <a href="?country=denmark" class="dropdown-item">Denmark</a>
            <a href="?country=finland" class="dropdown-item">Finland</a>
            <a href="?country=france" class="dropdown-item">France</a>
            <a href="?country=germany" class="dropdown-item">Germany</a>
            <a href="?country=ireland" class="dropdown-item">Ireland</a>
            <a href="?country=italy" class="dropdown-item">Italy</a>
            <a href="?country=netherlands" class="dropdown-item">Netherlands</a>
            <a href="?country=portugal" class="dropdown-item">Portugal</a>
            <a href="?country=spain" class="dropdown-item">Spain</a>
            <a href="?country=sweden" class="dropdown-item">Sweden</a>
        </div>
    </div>
</div>

card turns the menu into a panel for rich content: put a Card in it.

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle noCaret="{{ true }}" class="btn-icon" aria-label="Notifications">
        <twig:Tabler:Icon name="bell" class="icon" />
    </twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu card="{{ true }}">
        <twig:Tabler:Card>
            <twig:Tabler:Card:Header>
                <twig:Tabler:Card:Title>Notifications</twig:Tabler:Card:Title>
            </twig:Tabler:Card:Header>
            <twig:Tabler:Card:Body>
                <p class="mb-2"><strong>Jane Doe</strong> commented on invoice #1042.</p>
                <p class="mb-0"><strong>John Smith</strong> approved the March expenses.</p>
            </twig:Tabler:Card:Body>
        </twig:Tabler:Card>
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button
        type="button"
        class="btn btn-icon"
        data-bs-toggle="dropdown"
        aria-expanded="false"
        aria-label="Notifications"
    >
        <i class="ti ti-bell icon"></i>
    </button>
    <div class="dropdown-menu dropdown-menu-card">
        <div class="card">
            <div class="card-header"><h3 class="card-title">Notifications</h3></div>
            <div class="card-body">
                <p class="mb-2">
                    <strong>Jane Doe</strong>
                    commented on invoice #1042.
                </p>
                <p class="mb-0">
                    <strong>John Smith</strong>
                    approved the March expenses.
                </p>
            </div>
        </div>
    </div>
</div>

Columns and text

Dropdown:Columns splits a long menu into Dropdown:Columns. Dropdown:Text is plain text that is not an action:

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle variant="primary">Reports</twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu>
        <twig:Tabler:Dropdown:Text>Last updated today at 9:00</twig:Tabler:Dropdown:Text>
        <twig:Tabler:Dropdown:Divider />
        <twig:Tabler:Dropdown:Columns>
            <twig:Tabler:Dropdown:Column>
                <twig:Tabler:Dropdown:Header>Sales</twig:Tabler:Dropdown:Header>
                <twig:Tabler:Dropdown:Item href="/reports/revenue">Revenue</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item href="/reports/invoices">Invoices</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item href="/reports/customers">Customers</twig:Tabler:Dropdown:Item>
            </twig:Tabler:Dropdown:Column>
            <twig:Tabler:Dropdown:Column>
                <twig:Tabler:Dropdown:Header>Operations</twig:Tabler:Dropdown:Header>
                <twig:Tabler:Dropdown:Item href="/reports/expenses">Expenses</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item href="/reports/timesheets">Timesheets</twig:Tabler:Dropdown:Item>
                <twig:Tabler:Dropdown:Item href="/reports/stock">Stock</twig:Tabler:Dropdown:Item>
            </twig:Tabler:Dropdown:Column>
        </twig:Tabler:Dropdown:Columns>
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Reports
    </button>
    <div class="dropdown-menu">
        <span class="dropdown-item-text">Last updated today at 9:00</span>
        <div class="dropdown-divider"></div>
        <div class="dropdown-menu-columns">
            <div class="dropdown-menu-column">
                <div class="dropdown-header">Sales</div>
                <a href="/reports/revenue" class="dropdown-item">Revenue</a>
                <a href="/reports/invoices" class="dropdown-item">Invoices</a>
                <a href="/reports/customers" class="dropdown-item">Customers</a>
            </div>
            <div class="dropdown-menu-column">
                <div class="dropdown-header">Operations</div>
                <a href="/reports/expenses" class="dropdown-item">Expenses</a>
                <a href="/reports/timesheets" class="dropdown-item">Timesheets</a>
                <a href="/reports/stock" class="dropdown-item">Stock</a>
            </div>
        </div>
    </div>
</div>

Items

active highlights an item, disabled makes it non-interactive. icon puts a Tabler icon before the label, with the dropdown-item-icon class:

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle>Sort by</twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu>
        <twig:Tabler:Dropdown:Item href="?sort=date" icon="calendar" active="{{ true }}">Date</twig:Tabler:Dropdown:Item>
        <twig:Tabler:Dropdown:Item href="?sort=amount" icon="currency-euro">Amount</twig:Tabler:Dropdown:Item>
        <twig:Tabler:Dropdown:Item href="?sort=customer" icon="user" disabled="{{ true }}">Customer</twig:Tabler:Dropdown:Item>
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
    <div class="dropdown-menu">
        <a href="?sort=date" class="dropdown-item active">
            <i class="ti ti-calendar dropdown-item-icon"></i>
            Date
        </a>
        <a href="?sort=amount" class="dropdown-item">
            <i class="ti ti-currency-euro dropdown-item-icon"></i>
            Amount
        </a>
        <a href="?sort=customer" class="dropdown-item disabled" aria-disabled="true">
            <i class="ti ti-user dropdown-item-icon"></i>
            Customer
        </a>
    </div>
</div>

Dropdown:Indicator is a leading slot in an item for a small marker, such as an avatar, a checkbox or a flag (dropdown-item-indicator):

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle>Assign to</twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu>
        {% for person in [
            {name: 'Jane Cooper', avatar: '/examples/avatar-1.jpg'},
            {name: 'Wade Warren', avatar: '/examples/avatar-2.jpg'},
            {name: 'Esther Howard', avatar: '/examples/avatar-3.jpg'},
        ] %}
            <twig:Tabler:Dropdown:Item href="?assignee={{ loop.index }}">
                <twig:Tabler:Dropdown:Indicator><twig:Tabler:Avatar size="xs" image="{{ person.avatar }}" /></twig:Tabler:Dropdown:Indicator>
                {{ person.name }}
            </twig:Tabler:Dropdown:Item>
        {% endfor %}
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Assign to</button>
    <div class="dropdown-menu">
        <a href="?assignee=1" class="dropdown-item">
            <span class="dropdown-item-indicator">
                <span class="avatar avatar-xs" style="background-image: url(/examples/avatar-1.jpg)"></span>
            </span>
            Jane Cooper
        </a>
        <a href="?assignee=2" class="dropdown-item">
            <span class="dropdown-item-indicator">
                <span class="avatar avatar-xs" style="background-image: url(/examples/avatar-2.jpg)"></span>
            </span>
            Wade Warren
        </a>
        <a href="?assignee=3" class="dropdown-item">
            <span class="dropdown-item-indicator">
                <span class="avatar avatar-xs" style="background-image: url(/examples/avatar-3.jpg)"></span>
            </span>
            Esther Howard
        </a>
    </div>
</div>

An item holding a checkbox or a radio cannot be a link: set tag="label" on it, so a click anywhere on the item toggles the input. tag also takes button, for an action that is not a navigation. Add data-bs-auto-close="outside" to the toggle to keep the menu open while the user ticks several options:

<twig:Tabler:Dropdown>
    <twig:Tabler:Dropdown:Toggle data-bs-auto-close="outside">Columns</twig:Tabler:Dropdown:Toggle>
    <twig:Tabler:Dropdown:Menu>
        {% for column in [{label: 'Customer', checked: true}, {label: 'Amount', checked: true}, {label: 'Due date', checked: false}] %}
            <twig:Tabler:Dropdown:Item tag="label">
                <twig:Tabler:Dropdown:Indicator><input type="checkbox" class="form-check-input m-0"{% if column.checked %} checked{% endif %}></twig:Tabler:Dropdown:Indicator>
                {{ column.label }}
            </twig:Tabler:Dropdown:Item>
        {% endfor %}
    </twig:Tabler:Dropdown:Menu>
</twig:Tabler:Dropdown>

<div class="dropdown">
    <button
        type="button"
        class="btn dropdown-toggle"
        data-bs-toggle="dropdown"
        aria-expanded="false"
        data-bs-auto-close="outside"
    >
        Columns
    </button>
    <div class="dropdown-menu">
        <label class="dropdown-item">
            <span class="dropdown-item-indicator"><input type="checkbox" class="form-check-input m-0" checked /></span>
            Customer
        </label>
        <label class="dropdown-item">
            <span class="dropdown-item-indicator"><input type="checkbox" class="form-check-input m-0" checked /></span>
            Amount
        </label>
        <label class="dropdown-item">
            <span class="dropdown-item-indicator"><input type="checkbox" class="form-check-input m-0" /></span>
            Due date
        </label>
    </div>
</div>

Sub-components

Component	Renders
`Dropdown`	`<div class="dropdown">` around the toggle and the menu
`Dropdown:Toggle`	`<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">`
`Dropdown:Menu`	`<div class="dropdown-menu">`
`Dropdown:Item`	`<a class="dropdown-item">`, or the element set by `tag`
`Dropdown:Header`	`<div class="dropdown-header">`: a non-interactive label above a group of items
`Dropdown:Text`	`<span class="dropdown-item-text">`: plain text that is not an action
`Dropdown:Indicator`	`<span class="dropdown-item-indicator">`: a leading avatar, checkbox or flag in an item
`Dropdown:Divider`	`<div class="dropdown-divider">`: a separator between groups of items
`Dropdown:Columns`	`<div class="dropdown-menu-columns">`: splits the menu into columns
`Dropdown:Column`	`<div class="dropdown-menu-column">`: one column of `Dropdown:Columns`

Attributes of each component go to its root element.

Props

Dropdown:Header, Dropdown:Text, Dropdown:Indicator, Dropdown:Divider, Dropdown:Columns and Dropdown:Column take no props.

Prop	Type	Default	Description
`direction`	string	`'down'`	`down` `up` `end` `start`: where the menu opens (`dropup` `dropend` `dropstart`)

Dropdown:Toggle

Prop	Type	Default	Description
`variant`	string?	`null`	`primary` `secondary` `success` `danger` `warning` `info` `dark` `light`; `null` for a plain `.btn`
`noCaret`	bool	`false`	Hides the caret (no `dropdown-toggle` class)
`split`	bool	`false`	Caret-only half of a split button (`dropdown-toggle-split`)

Dropdown:Menu

Prop	Type	Default	Description
`end`	bool	`false`	Aligns the menu to the end (`dropdown-menu-end`)
`arrow`	bool	`false`	Arrow pointing at the toggle (`dropdown-menu-arrow`)
`dark`	bool	`false`	Dark menu (`dropdown-menu-dark`)
`scrollable`	bool	`false`	Caps the height and scrolls (`dropdown-menu-scrollable`)
`card`	bool	`false`	Panel for rich content (`dropdown-menu-card`)

Dropdown:Item

Prop	Type	Default	Description
`tag`	string	`'a'`	`a` `button` `label`… Only an `<a>` gets the `href`; a `button` gets `type="button"`
`href`	string?	`null`	Link target, `#` when `null`
`active`	bool	`false`	Highlighted item (`active`)
`disabled`	bool	`false`	Non-interactive item (`disabled`, `aria-disabled`, or the `disabled` attribute on a `button`)
`icon`	string?	`null`	Leading Tabler icon name (`dropdown-item-icon`)