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
`align`	Breadcrumb alignment.	String	`is-left`, `is-centered`, `is-right`	`is-right`
`separator`	Symbol that separates the breadcrumb items.	String	`has-arrow-separator`, `has-bullet-separator`, `has-dot-separator`, `has-succeeds-separator`	—
`size`	The breadcrumb size	String	`is-small`, `is-medium`, `is-large`	`is-medium`

Breadcrumb Item

Name	Description	Type	Values	Default
`tag`	a, router-link and it's html attributes like href, to, etc...	String	`router-link`, `a`	`a`
`active`	is the current breadcrumb is actually the current page.	Boolean	`false`, `true`	`false`

# Variables

You can use these variables to customize this component.

Name	Default
Bulma variables	Link

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

Improve this page on GitHub