Breadcrumb nav wrapper.

Example

heex title="Breadcrumb" align="full" <.breadcrumb> <.breadcrumb_list> <.breadcrumb_item><.breadcrumb_link href="/">Home</.breadcrumb_link></.breadcrumb_item> <.breadcrumb_separator /> <.breadcrumb_item><.breadcrumb_page>Settings</.breadcrumb_page></.breadcrumb_item> </.breadcrumb_list> </.breadcrumb>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Breadcrumb ellipsis element.

Example

heex title="Collapsed breadcrumb segment" <.breadcrumb_ellipsis />

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted.

Breadcrumb item (li).

Example

heex title="Breadcrumb item" align="full" <.breadcrumb> <.breadcrumb_list> <.breadcrumb_item> <.breadcrumb_link href="/settings">Settings</.breadcrumb_link> </.breadcrumb_item> </.breadcrumb_list> </.breadcrumb>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Breadcrumb link.

Example

heex title="Breadcrumb link" align="full" <.breadcrumb_link href="/projects">Projects</.breadcrumb_link>

## Screenshot

View live examples and full component docs.

## Attributes

href (:string) (required) class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* inner_block (required)

Breadcrumb list (ol).

Example

heex title="Breadcrumb list" align="full" <.breadcrumb_list> <.breadcrumb_item><.breadcrumb_link href="/">Home</.breadcrumb_link></.breadcrumb_item> <.breadcrumb_separator /> <.breadcrumb_item><.breadcrumb_page>Billing</.breadcrumb_page></.breadcrumb_item> </.breadcrumb_list>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Breadcrumb current page item.

Example

heex title="Current page" align="full" <.breadcrumb_page>Deployment settings</.breadcrumb_page>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Breadcrumb separator item.

Example

heex title="Breadcrumb separator" align="full" <.breadcrumb_separator />

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block

Generic application menu list inspired by daisyUI's menu primitive.

Supports vertical and horizontal layouts with active/disabled item states.

Example

heex title="App menu" align="full" <.menu> <:item href="/overview" active={true}>Overview</:item> <:item href="/settings">Settings</:item> <:item href="/billing" disabled={true}>Billing</:item> </.menu>

## Screenshot

View live examples and full component docs.

## Attributes

orientation (:atom) - Defaults to :vertical. Must be one of :vertical, or :horizontal. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* item (required) - Accepts attributes:

href (:string) active (:boolean) * disabled (:boolean)

Navigation menu scaffold.

This is a semantic wrapper for custom menu items.

Example

heex title="Navigation menu" align="full" <.navigation_menu> <:item href="/docs" active={true}>Docs</:item> <:item href="/components">Components</:item> <:item href="/themes">Themes</:item> </.navigation_menu>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* item (required) - Accepts attributes:

href (:string) active (:boolean)

Pagination nav wrapper.

Example

heex title="Pagination" align="full" <.pagination> <.pagination_content> <.pagination_item><.pagination_previous href="#" /></.pagination_item> <.pagination_item><.pagination_link href="#" active>1</.pagination_link></.pagination_item> <.pagination_item><.pagination_next href="#" /></.pagination_item> </.pagination_content> </.pagination>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Pagination list wrapper (ul).

Example

heex title="Pagination content" align="full" <.pagination_content> <.pagination_item><.pagination_link href="#" active>1</.pagination_link></.pagination_item> <.pagination_item><.pagination_link href="#">2</.pagination_link></.pagination_item> </.pagination_content>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Pagination ellipsis marker.

Example

heex title="Pagination ellipsis" <.pagination_ellipsis />

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted.

Pagination item (li).

Example

heex title="Pagination item" align="full" <.pagination_item> <.pagination_link href="#" active>1</.pagination_link> </.pagination_item>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Pagination link with active state.

Example

heex title="Pagination link" <.pagination_link href="#" active>1</.pagination_link>

## Screenshot

View live examples and full component docs.

## Attributes

href (:string) - Defaults to nil. active (:boolean) - Defaults to false. size (:atom) - Defaults to :icon. Must be one of :default, :sm, :lg, or :icon. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* inner_block (required)

Next-page shortcut link.

Example

heex title="Next page link" <.pagination_next href="#" />

## Screenshot

View live examples and full component docs.

## Attributes

href (:string) - Defaults to nil. class (:string) - Defaults to nil. * Global attributes are accepted.

Previous-page shortcut link.

Example

heex title="Previous page link" <.pagination_previous href="#" />

## Screenshot

View live examples and full component docs.

## Attributes

href (:string) - Defaults to nil. class (:string) - Defaults to nil. * Global attributes are accepted.

Tab container with trigger and content slots.

State is controlled through the value assign.

Examples

heex title="Settings tabs" align="full" <.tabs value="account"> <:trigger value="account">Account</:trigger> <:trigger value="security">Security</:trigger> <:trigger value="notifications">Notifications</:trigger> <:content value="account"> <.card> <.card_header> <.card_title>Account</.card_title> <.card_description>Update your profile details.</.card_description> </.card_header> </.card> </:content> <:content value="security"> <p class="text-sm">Manage password and two-factor settings.</p> </:content> <:content value="notifications"> <p class="text-sm">Choose how you receive alerts.</p> </:content> </.tabs>

heex title="Line variant for analytics views" vrt <.tabs value="overview" variant={:line}> <:trigger value="overview">Overview</:trigger> <:trigger value="usage">Usage</:trigger> <:trigger value="logs">Logs</:trigger> <:content value="overview">Overview content</:content> <:content value="usage">Usage content</:content> <:content value="logs">Logs content</:content> </.tabs>

heex title="Vertical tabs for admin panels" vrt <.tabs value="general" orientation={:vertical} class="items-start"> <:trigger value="general">General</:trigger> <:trigger value="members">Members</:trigger> <:trigger value="api">API Keys</:trigger> <:content value="general">General settings</:content> <:content value="members">Team membership</:content> <:content value="api">API key management</:content> </.tabs>

## Screenshot

View live examples and full component docs.

## Attributes

id (:string) - Defaults to nil. value (:string) (required) - active tab value used to mark the selected trigger and panel. orientation (:atom) - layout direction for both the trigger list and content shell. Defaults to :horizontal. Must be one of :horizontal, or :vertical. variant (:atom) - visual treatment for the tab list and active trigger. Defaults to :default. Must be one of :default, or :line. class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* trigger (required) - Accepts attributes:

value (:string) (required) - value that activates the associated content panel. class (:string) data_theme_mode (:string) - optional theme marker used by demo/docs previews. content - Accepts attributes:

* value (:string) (required) - value matched against the active tab.