Breadcrumb

The Breadcrumb is a simple navigational component that indicates the location of the current page within a list to parent pages in the navigation hierarchy. It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally in front of the main content of a page. The elements are split by a sperator, either by css or by a given string. The component implements the W3C ARIA APG Breadcrumb Pattern.

Examples

Base

Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the nav element. To determine the current page, set the active prop. This applies an aria-current="page" to the item to indicate that it represents the current page. Individual items can also be disabled using the disabled prop.

Show code

HTML

<section>
    <o-breadcrumb>
        <o-breadcrumb-item disabled> Home </o-breadcrumb-item>
        <o-breadcrumb-item href="/"> Docs </o-breadcrumb-item>
        <o-breadcrumb-item href="/components/Breadcrumb.html" active>
            Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
</section>

Separators

Dividers are automatically added in CSS by the theme. In addition, the component allows you to customise the seperator using the seperator prop. The seperator slot can be used if further customisation is needed.

Show code

HTML

<section>
    <!-- Separatoer slash -->
    <o-breadcrumb separator="/">
        <o-breadcrumb-item label="Home" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Separatoer dot -->
    <o-breadcrumb separator="•">
        <o-breadcrumb-item label="Home" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Separatoer chevron -->
    <o-breadcrumb separator="≻">
        <o-breadcrumb-item label="Home" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Separatoer arrow -->
    <o-breadcrumb separator="→">
        <o-breadcrumb-item label="Home" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>
</section>

Options

Instead of using the <o-breadcrumb-item> component directly inside the default template slot, an options prop can be set, which allows the options to be set programmatically. It accepts several different value formats:

• An array of primitives ['A', 'B', 'C']
• An object literal with key-value pairs { a: 'A', b: 'B', c: 'C' }
• An array of objects where each object represent an item

Show code

HTML

<section>
    <o-breadcrumb :options="options" />
</section>

JS

import type { BreadcrumnOptions } from "@oruga-ui/oruga-next";

const options: BreadcrumnOptions = [
    {
        label: "Home",
        href: "/",
        disabled: true,
    },
    {
        label: "Docs",
    },
    {
        label: "Breadcrumb",
        active: true,
    },
];

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section>
    <!-- Variant primary -->
    <o-breadcrumb variant="primary">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Variant secondary -->
    <o-breadcrumb variant="secondary">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Variant success -->
    <o-breadcrumb variant="success">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Variant info -->
    <o-breadcrumb variant="info">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Variant warning -->
    <o-breadcrumb variant="warning">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Variant danger -->
    <o-breadcrumb variant="danger">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" href="/" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>
</section>

Sizes

The component can be displayed in different sizes using the size prop.

Show code

HTML

<section>
    <!-- Size small -->
    <o-breadcrumb size="small">
        <o-breadcrumb-item label="Home" href="/" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Size default -->
    <o-breadcrumb>
        <o-breadcrumb-item label="Home" href="/" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Size medium -->
    <o-breadcrumb size="medium">
        <o-breadcrumb-item label="Home" href="/" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Size large -->
    <o-breadcrumb size="large">
        <o-breadcrumb-item label="Home" href="/" />
        <o-breadcrumb-item label="Docs" disabled />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>
</section>

Positions

For alternative alignments, the breadcrumb can be positioned by the position prop.

Show code

HTML

<section>
    <!-- Position left -->
    <o-breadcrumb position="left">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Position center -->
    <o-breadcrumb position="centered">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>

    <!-- Position right -->
    <o-breadcrumb position="right">
        <o-breadcrumb-item label="Home" disabled />
        <o-breadcrumb-item label="Docs" />
        <o-breadcrumb-item label="Breadcrumb" active />
    </o-breadcrumb>
</section>

Icons

You can add an icon to the item to explain its function more visually.

Show code

HTML

<section>
    <o-field grouped>
        <o-field label="Icon Size">
            <o-select v-model="iconSize">
                <option value="small">Small</option>
                <option value="">Default</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>

        <o-field label="Text Size">
            <o-select v-model="size">
                <option value="small">Small</option>
                <option value="">Default</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
    </o-field>

    <o-breadcrumb :size="size">
        <o-breadcrumb-item
            label="Home"
            icon-left="home"
            :icon-size="iconSize" />
        <o-breadcrumb-item
            label="Docs"
            icon-left="plus"
            :icon-size="iconSize" />
        <o-breadcrumb-item
            label="Breadcrumb"
            icon-left="location"
            :icon-size="iconSize"
            active />
    </o-breadcrumb>

    <o-breadcrumb :size="size">
        <o-breadcrumb-item
            label="Home"
            icon-right="home"
            :icon-size="iconSize" />
        <o-breadcrumb-item
            label="Docs"
            icon-right="plus"
            :icon-size="iconSize" />
        <o-breadcrumb-item
            label="Breadcrumb"
            icon-right="location"
            :icon-size="iconSize"
            active />
    </o-breadcrumb>
</section>

JS

import { ref } from "vue";

const iconSize = ref<string>("");
const size = ref<string>("");

Tags

By default the breadcrumb items are represented as HTML a tag elements. The HTML tag can be customised using the tag prop for an item, for example to define links using vue-router and router-link tag.

Show code

HTML

<section>
    <!-- remove links -->
    <o-breadcrumb separator="->">
        <o-breadcrumb-item label="Home" tag="a" href="/" disabled />
        <o-breadcrumb-item label="Docs" tag="a" href="/documentation/" />
        <o-breadcrumb-item
            label="Breadcrumb"
            tag="a"
            href="/components/Breadcrumb.html"
            active />
    </o-breadcrumb>

    <!-- need vue-router -->
    <o-breadcrumb separator="/">
        <o-breadcrumb-item label="Home" tag="router-link" to="/" disabled />
        <o-breadcrumb-item
            label="Docs"
            tag="router-link"
            to="/documentation/" />
        <o-breadcrumb-item
            label="Breadcrumb"
            tag="router-link"
            to="/components/Breadcrumb"
            active />
    </o-breadcrumb>
</section>

Breadcrumb Component

The classic breadcrumb, in different colors, sizes, and states

<o-breadcrumb></o-breadcrumb>

Props

Prop name	Description	Type	Values	Default
ariaLabel	Accessibility aria-label to be passed to the nav wrapper element	string	-	From config: modal: {   ariaLabel: "Breadcrumb" }
options	breadcrumb items, unnecessary when default slot is used	BreadcrumnOptions	-
override	Override existing theme classes completely	boolean	-
position	Position of the breadcrumb	"centered" | "left" | "right"	left, centered, right	From config: breadcrumb: {   position: undefined }
separator	The separator between breadcrumb items	string	-	From config: breadcrumb: {   separator: "/" }
size	Size of the breadcrumb	string	small, medium, large	From config: breadcrumb: {   size: undefined }
variant	Color variant of the breadcrumb	string	primary, info, success, warning, danger, and any other custom color	From config: breadcrumb: {   variant: undefined }

Slots

Name	Description	Bindings
default	Place breadcrumb items here

BreadcrumbItem Component

The classic breadrcumb item, in different colors, sizes, and states

<o-breadcrumb-item></o-breadcrumb-item>

Props

Prop name	Description	Type	Values	Default
active	Whether item is active or not	boolean	-	false
disabled	Item is disabled	boolean	-	false
hidden	Define whether the item is visible or not	boolean	-	false
iconLeft	Icon name to show on the left	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: breadcrumb: {   iconPack: undefined }
iconRight	Icon name to show on the right	string	-
iconSize	Icon size	string	small, medium, large	From config: breadcrumb: {   iconSize: undefined }
label	Item label, unnecessary when default slot is used	string	-
override	Override existing theme classes completely	boolean	-
tag	Item tag name	DynamicComponent	li, a, router-link, nuxt-link (or other nuxt alias)	From config: breadcrumb: {   tag: "a" }

Slots

Name	Description	Bindings
seperator	Item seperator
default	Override the label, default is label prop

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class Inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
sizeClass	Class of the root element with size.	size	small medium large
variantClass	Class of the root element with variant.	variant	primary info warning danger
positionClass	Class of the breadcrumb with alignment.	position	left center right
listClass	Class of the list element.
itemClass	Class of the item element.
disabledClass	Class of the item element when disabled.	disabled
activeClass	Class of the item element when active.	active
seperatorClass	Class of the item seperator element.	separator
linkClass	Class of the item link element.
iconClass	Class of the item icon element.	iconLeft iconRight
iconLeftClass	Class of the item left icon element.	iconLeft
iconRightClass	Class of the item right icon element.	iconRight

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$breadcrumb-line-height	1.25em
$breadcrumb-seperator-color	inherit
$breadcrumb-disabled-opacity	h.useVar("control-disabled-opacity")
$breadcrumb-item-spacer	calc(0.5 * h.useVar("control-spacer"))
$breadcrumb-item-padding	0.3em
$breadcrumb-item-color	h.useVar("font-color")
$breadcrumb-item-font-size	h.useVar("font-size")
$breadcrumb-item-font-weight	h.useVar("font-weight")
$breadcrumb-item-line-height	h.useVar("line-height")
$breadcrumb-item-border-radius	h.useVar("border-radius")
$breadcrumb-item-background-color	transparent
$breadcrumb-item-active-color	h.useVar("primary")
$breadcrumb-item-active-background-color	transparent
$breadcrumb-item-hover-color	h.useVar("white")
$breadcrumb-item-hover-background-color	h.useVar("secondary")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

SASS Variable	Default
$breadcrumb-colors	dv.$colors

See ➜ 📄 SCSS file

Current theme ➜ Bootstrap

SASS Variable	Default
$breadcrumb-color	var(--#{$prefix}primary)

See ➜ 📄 SCSS file