Neura UI

Loading…

Logo
Neura UI
All pages 108

Breadcrumbs

The trail to the current page: six styles, separators, icons and badges, switchers between neighbours, folding and a responsive back link.

Basic Usage

Items with an href are links; the last item is the page you are on and gets aria-current. The trail is a nav list labelled for screen readers.
blade 
<neura::breadcrumbs>
    <neura::breadcrumbs.item href="#">Home</neura::breadcrumbs.item>
    <neura::breadcrumbs.item href="#">Campaigns</neura::breadcrumbs.item>
    <neura::breadcrumbs.item href="#">Car Insurance FR</neura::breadcrumbs.item>
    <neura::breadcrumbs.item>Ads</neura::breadcrumbs.item>
</neura::breadcrumbs>

Variants

default (links and chevrons), ghost (a soft background on hover), pills (chips, the current one filled), steps (arrow-shaped segments), contained (in a bar, with room for actions) and underline (the current page underlined).
blade
variant="default"
variant="ghost"
variant="pills"
variant="steps"
variant="contained"
variant="underline" 
<neura::breadcrumbs variant="pills">…</neura::breadcrumbs>
<neura::breadcrumbs variant="steps" color="indigo">…</neura::breadcrumbs>

Separators

chevron, slash, dot, arrow and pipe are drawn by the trail; any other name is an icon. An item can take its own separator, an icon name or a slot.
blade
separator="chevron"
separator="slash"
separator="dot"
separator="arrow"
separator="pipe"
separator="chevron-double-right" 
<neura::breadcrumbs separator="slash">…</neura::breadcrumbs>
<neura::breadcrumbs separator="chevron-double-right">…</neura::breadcrumbs>

Icons and Rich Content

icon puts an icon before the label (alone, it makes an icon link: give it an aria-label). initials or src add an avatar, dot a status dot, badge a badge after the label.
blade 
<neura::breadcrumbs.item href="/" icon="home" aria-label="Home" />
<neura::breadcrumbs.item href="/users/12" initials="LO" color="indigo">Lena Ortiz</neura::breadcrumbs.item>
<neura::breadcrumbs.item badge="Draft" badge-color="warning">Variant B</neura::breadcrumbs.item>

Switchers

With options, an item gets a button that lists its neighbours, to jump from one advertiser or campaign to another without going back up. Past six options a search field filters them; a footer slot adds an action.
blade 
<neura::breadcrumbs.item href="/campaigns/1" dot="emerald" :options="[
    ['label' => 'Car Insurance FR', 'href' => '/campaigns/1', 'dot' => 'emerald', 'meta' => 'Active'],
    ['label' => 'Order FR', 'href' => '/campaigns/3', 'dot' => 'amber', 'meta' => 'Paused'],
]">
    Car Insurance FR
    <x-slot:footer><a href="/campaigns/create" class="nk-bc-option">+ New campaign</a></x-slot:footer>
</neura::breadcrumbs.item>

Folding Long Trails

Past max-items, the middle folds into "…", whose menu lists the hidden levels. items-before and items-after set how many stay at each end (1 and 2).
blade 
<neura::breadcrumbs :max-items="4">…</neura::breadcrumbs>

Responsive

By default the trail measures itself: when it no longer fits, the middle folds, and when even that is too wide only a link back to the parent stays. Drag the corner of the box to see it. :responsive="false" lets it wrap instead.
blade 
<neura::breadcrumbs>…</neura::breadcrumbs>
<neura::breadcrumbs :responsive="false">…</neura::breadcrumbs>

Long Labels

truncate cuts labels at a width (12rem with truncate alone); a cut label shows in full in a tooltip, on hover and on focus.
blade 
<neura::breadcrumbs truncate="11rem">…</neura::breadcrumbs>

Sizes and Colours

size sets the text, icons and chips; color the current page (neutral by default), tinted gives it a background.
blade
size="sm"
size="lg"
color="indigo"
color="indigo" tinted
variant="pills" color="emerald" 
<neura::breadcrumbs size="sm">…</neura::breadcrumbs>
<neura::breadcrumbs color="indigo" tinted>…</neura::breadcrumbs>

Actions

An actions slot sits at the end of the trail; it suits the contained bar.
blade 
<neura::breadcrumbs variant="contained">
    …
    <x-slot:actions>
        <neura::button size="sm" variant="outline" icon="link">Copy link</neura::button>
    </x-slot:actions>
</neura::breadcrumbs>

Configuration

Defaults live in config/neura-kit.php, like the other components. A prop on the tag wins over them.
php 
'breadcrumbs' => Config::breadcrumbs([
    'default' => [
        'variant' => 'default',     // default | ghost | pills | steps | contained | underline
        'separator' => 'chevron',   // chevron | slash | dot | arrow | pipe | an icon name
        'size' => 'md',             // sm | md | lg (pack: Breadcrumbs\Size)
        'color' => 'neutral',       // the current page
        'rounded' => 'global',
        'maxItems' => null,
        'itemsBefore' => 1,
        'itemsAfter' => 2,
        'responsive' => true,
    ],
]),
'breadcrumbs' => Config::breadcrumbs([
    'default' => [
        'variant' => 'default',     // default | ghost | pills | steps | contained | underline
        'separator' => 'chevron',   // chevron | slash | dot | arrow | pipe | an icon name
        'size' => 'md',             // sm | md | lg (pack: Breadcrumbs\Size)
        'color' => 'neutral',       // the current page
        'rounded' => 'global',
        'maxItems' => null,
        'itemsBefore' => 1,
        'itemsAfter' => 2,
        'responsive' => true,
    ],
]),

Breadcrumbs Props

Prop Type Default Description
variant string config: default default, ghost, pills, steps, contained, underline
separator string|slot config: chevron chevron, slash, dot, arrow, pipe, or an icon name
size sm|md|lg config: md Text, icons and chips (pack: Breadcrumbs\Size)
color string config: neutral Colour of the current page
tinted boolean false A background behind the current page
rounded string config: global Corners of chips, steps, the bar and menus
maxItems int|null config: null Fold the middle past that many items
itemsBefore / itemsAfter int config: 1 / 2 Items kept at each end when folding
responsive boolean config: true Fold, then keep a back link, when the trail does not fit
truncate string|true null Cut labels at this width (true: 12rem), full label in a tooltip
label string Breadcrumb Accessible name of the nav
actions slot Content at the end of the trail

Item Props

Prop Type Default Description
href string null Link; without it the item is plain text
current boolean last item This item is the current page
icon / iconVariant string null / mini An icon before the label
initials / src / color string null An avatar before the label
dot string null A status dot in that colour
badge / badgeColor string null A badge after the label
options array null Neighbours to switch to: label, href, active, dot, initials, color, icon, meta
searchable boolean more than 6 A search field in the switcher
separator string|slot the trail’s This item’s own separator
label string the text Label used in menus, tooltips and the back link
footer slot An action at the foot of the switcher