Breadcrumb

Breadcrumb component for flexible navigation through the pages of your website!

# Alignments

<template>
	<section>
        <!-- Left -->
        <b-breadcrumb
            align="is-left"
        >
            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Center -->
        <b-breadcrumb
            align="is-centered"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Right -->
        <b-breadcrumb
            align="is-right"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
    </section>
</template>

<script>
export default {

  name: 'ExAlignments',

}
</script>

# Separators

<template>
	<section>
		<!-- Default -->
        <b-breadcrumb>
            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Arrow -->
        <b-breadcrumb
            separator="has-arrow-separator"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Bullet -->
        <b-breadcrumb
            separator="has-bullet-separator"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Dot -->
        <b-breadcrumb
            separator="has-dot-separator"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Succeeds -->
        <b-breadcrumb
            separator="has-succeeds-separator"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
    </section>
</template>

<script>
export default {

  name: 'ExSeparators',

}
</script>

# Sizes

<template>
	<section>
        <!-- Left -->
        <b-breadcrumb
            size="is-small"
        >
            <b-breadcrumb-item tag='router-link' to="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item tag='router-link' to="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Center -->
        <b-breadcrumb
            size="is-medium"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
        <!-- Right -->
        <b-breadcrumb
            size="is-large"
        >
            <b-breadcrumb-item href="/">Home</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation">Docs</b-breadcrumb-item>
            <b-breadcrumb-item href="/documentation/breadcrumb" active>Breadcrumb</b-breadcrumb-item>
        </b-breadcrumb>
    </section>
</template>

<script>
export default {

  name: 'ExSizes',

}
</script>

# API

Breadcrumb

Name
Description
Type
Values
Default
alignBreadcrumb alignment.Stringis-left, is-centered, is-rightis-right
separatorSymbol that separates the breadcrumb items.Stringhas-arrow-separator, has-bullet-separator, has-dot-separator, has-succeeds-separator
sizeThe breadcrumb sizeStringis-small, is-medium, is-largeis-medium

Breadcrumb Item

Name
Description
Type
Values
Default
taga, router-link and it's html attributes like href, to, etc...Stringrouter-link, aa
activeis the current breadcrumb is actually the current page.Booleanfalse, truefalse

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub