Help users navigate and understand their place within your application.
<flux:breadcrumbs> <flux:breadcrumbs.item href="#">Home</flux:breadcrumbs.item> <flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>Use slashes instead of chevrons to separate breadcrumb items.
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" separator="slash">Home</flux:breadcrumbs.item> <flux:breadcrumbs.item href="#" separator="slash">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item separator="slash">Post</flux:breadcrumbs.item></flux:breadcrumbs>Use an icon instead of text for a particular breadcrumb item.
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item href="#">Blog</flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>Truncate a long breadcrumb list with an ellipsis.
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item icon="ellipsis-horizontal" /> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>Truncate a long breadcrumb list into a single ellipsis dropdown.
<flux:breadcrumbs> <flux:breadcrumbs.item href="#" icon="home" /> <flux:breadcrumbs.item> <flux:dropdown> <flux:button icon="ellipsis-horizontal" variant="ghost" size="sm" /> <flux:navmenu> <flux:navmenu.item>Client</flux:navmenu.item> <flux:navmenu.item icon="arrow-turn-down-right">Team</flux:navmenu.item> <flux:navmenu.item icon="arrow-turn-down-right">User</flux:navmenu.item> </flux:navmenu> </flux:dropdown> </flux:breadcrumbs.item> <flux:breadcrumbs.item>Post</flux:breadcrumbs.item></flux:breadcrumbs>