Breadcrumb

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

Examples

Base

Show code

HTML

<section>
    <o-breadcrumb
        separator="has-arrow-separator"
        size="medium"
        align="center"
        tag="section">
        <o-breadcrumb-item
            tag="a"
            href="/"
            active="true"
            active-variant="primary"
            >Homee
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <o-breadcrumb
        tag="section"
        separator="has-arrow-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="router-link" to="/" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item
            tag="router-link"
            to="/documentation/"
            disabled="true"
            active-variant="primary"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item
            tag="router-link"
            to="/components/Breadcrumb"
            active-variant="primary"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
</section>

Separators

Show code

HTML

<section>
    <!-- Separatoer Slash -->
    <o-breadcrumb tag="section" separator="has-slash-separator">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!-- Separatoer dot -->
    <o-breadcrumb tag="section" separator="has-dot-separator">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!-- Separatoer chevron -->
    <o-breadcrumb tag="section" separator="has-chevron-separator">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!-- Separatoer bullet -->
    <o-breadcrumb tag="section" separator="has-bullet-separator">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!-- Separatoer succeeds -->
    <o-breadcrumb
        tag="section"
        separator="has-succeeds-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
</section>

Icons

Show code

HTML

<section>
    <!-- has-slash-separator -->
    <o-breadcrumb
        tag="section"
        separator="has-slash-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="a" active="true" active-variant="primary">Home </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" disabled="true">Docs </o-breadcrumb-item>
        <o-breadcrumb-item tag="a">Breadcrumb </o-breadcrumb-item>
    </o-breadcrumb>
    <!-- has-chevron-separator -->
    <o-breadcrumb
        tag="section"
        separator="has-chevron-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="a" active="true" active-variant="primary">Home </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" disabled="true">Docs </o-breadcrumb-item>
        <o-breadcrumb-item tag="a">Breadcrumb</o-breadcrumb-item>
    </o-breadcrumb>
    <!-- has-arrow-separator -->
    <o-breadcrumb
        tag="section"
        separator="has-arrow-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="a" icon-left="home" active="true" active-variant="primary">Home</o-breadcrumb-item>
        <o-breadcrumb-item tag="a" icon-left="plus" disabled="true">Docs</o-breadcrumb-item>
        <o-breadcrumb-item tag="a" icon-left="location">Breadcrumb</o-breadcrumb-item>
    </o-breadcrumb>
    <!-- has-dot-separator -->
    <o-breadcrumb
        tag="section"
        separator="has-dot-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="a" icon-right="home" active="true" active-variant="primary">Home</o-breadcrumb-item>
        <o-breadcrumb-item tag="a" icon-right="plus" disabled="true">Docs</o-breadcrumb-item>
        <o-breadcrumb-item tag="a" icon-right="location">Breadcrumb</o-breadcrumb-item>
    </o-breadcrumb>
</section>

Sizes

Show code

HTML

<section class="odocs-spaced">
    <!--  Size small -->
    <o-breadcrumb
        tag="section"
        separator="has-arrow-separator"
        size="small"
        align="center">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!--  Size medium -->
    <o-breadcrumb
        tag="section"
        separator="has-arrow-separator"
        size="medium"
        align="center">
        <o-breadcrumb-item tag="router-link" to="/" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/documentation/" disabled="true" active-variant="primary"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/components/Breadcrumb" active-variant="primary"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!--  Size large -->
    <o-breadcrumb
        tag="section"
        separator="has-arrow-separator"
        size="large"
        align="center">
        <o-breadcrumb-item tag="router-link" to="/" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/documentation/" disabled="true" active-variant="primary"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/components/Breadcrumb" active-variant="primary"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>

</section>

Positions

Show code

HTML

<section class="odocs-spaced">
    <!--  Position left -->
    <o-breadcrumb tag="section" align="left">
        <o-breadcrumb-item tag="a" href="/" active="true" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/documentation/" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="a" href="/components/Breadcrumb.html"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!--  Position center -->
    <o-breadcrumb tag="section" align="centered">
        <o-breadcrumb-item tag="router-link" to="/" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/documentation/" active-variant="primary" disabled="true"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/components/Breadcrumb" active-variant="primary"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
    <!--  Position right -->
    <o-breadcrumb tag="section" align="right">
        <o-breadcrumb-item tag="router-link" to="/" active-variant="primary"
            >Home
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/documentation/" disabled="true" active-variant="primary"
            >Docs
        </o-breadcrumb-item>
        <o-breadcrumb-item tag="router-link" to="/components/Breadcrumb" active-variant="primary"
            >Breadcrumb
        </o-breadcrumb-item>
    </o-breadcrumb>
</section>

Class props

Classes applied to the element:

How does the Class props 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.
wrapperClass	Class of the breadcrumb elements wrapper.
disabledClass	Class of the breadcrumb when disabled.	disabled
sizeClass	Class of the breadcrumb size.	size	small medium large
variantClass	Class of the breadcrumb variant.	variant	primary info warning danger
separatorClass	Class of the breadcrumb separator.	separator	has-arrow-separator has-dot-separator has-slash-separator has-bullet-separator has-succeeds-separator has-chevron-separator
alignClass	Class of the breadcrumb align.	align	left center right

Breadcrumb component

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

<o-breadcrumb></o-breadcrumb>

Props

Prop name	Description	Type	Values	Default
align	Position of breadcrumb	string	left, centered, right	left
override	Override existing theme classes completely	boolean
size	Size of the breadcrumb	string	small, medium, large	medium
tag	Tag of the breadcrumb	string	div, section ...	section
separator	Separator between breadcrumb items	string	has-arrow-separator, has-dot-separator, has-slash-separator, has-bullet-separator, has-succeeds-separator, has-chevron-separator	has-slash-separator

Slots

Name	Description	Bindings
default

Breadcrumb item component

The classic breadcrumb item, in different colors, icons and states

<o-breadcrumb></o-breadcrumb>

Props

Prop name	Description	Type	Values	Default
active	Active breadcrumb item	boolean	primary, info, warning, danger	false
activeVariant	Variant of active breadcrumb item	string		primary
disabled	breadcrum item is disabled	boolean		false
tag	Tag of the breadcrumb item	string	a, router-link	a
iconLeft	Icon name to show on the left	string
iconRight	Icon name to show on the right	string
iconBoth	Icon name to show on both sides	string
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack

Slots

Name	Description	Bindings
default

Sass variables

Current theme ➜ Oruga

The theme does not have any custom variables for this component.

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.