Revo Docs

Breadcrumbs

The component that allows you to showcase a large amount of links that are related to each other, especially in a hierarchical way. It is a great way to show the user where they are in the application and how they can navigate back to where they came from.

<x-ui::breadcrumbs :data="[
    'Home' => '/hello',
    'Groups' => '/hello/baby',
    'Categories' => '/helly/sexy/baby',
    'Products'
]" />
Copied!

Avoiding duplicate keys

You may find yourself in a situation where you have duplicate keys in the data array. This will cause the underlying array to be truncated to the last duplicate key, essentially losing the first occurrence of the key. You can fix this by passing an array of title-url pairs to the data attribute.

Home
Groups
Products
 (10)
<x-ui::breadcrumbs :data="[
    ['title' => 'Home', 'url' => '/hello'],
    ['title' => 'Groups', 'url' => '/hello/baby'],
    ['title' => 'Products'],
]"/>
Copied!

Count

You can easily add a count to the last element, which indicates the number of items in the list. This is useful when the list contains a large amount of items and pagination is present.

Home
Groups
Products
 (10)
<x-ui::breadcrumbs :data="[
    'Home' => '/hello',
    'Groups' => '/hello/baby',
    'Products'
]" count="10" />
Copied!