Breadcrumb

View Source

NOTE: Introduced feature in v0.2.0.

Breadcrumb is typically used to render a series of links with separators. With the each link left of the right-most a state in the end-user's navigation history. Or, a route hierarchy of the Web Application. e.g. directory paths

<script>
    import {Breadcrumb} from "@kahi-ui/framework";
</script>

<Breadcrumb.Container>
    <Breadcrumb.Anchor href="#">
        home
    </Breadcrumb.Anchor>

    <Breadcrumb.Anchor href="#">
        pictures
    </Breadcrumb.Anchor>

    <Breadcrumb.Anchor href="#" active>
        IMG_20191123_121131.jpg
    </Breadcrumb.Anchor>
</Breadcrumb.Container>

Imports

<script>
    import {Breadcrumb} from "@kahi-ui/framework";

    const {
        Container,
        Anchor,
        Button,
        Group,
        Separator,
    } = Breadcrumb;
</script>

Separator

You can alter the separator between items rendered via the separator property.

<script>
    import {Breadcrumb} from "@kahi-ui/framework";
</script>

<Breadcrumb.Container separator=">">
    <Breadcrumb.Anchor href="#">
        Home
    </Breadcrumb.Anchor>

    <Breadcrumb.Anchor href="#">
        Contacts
    </Breadcrumb.Anchor>

    <Breadcrumb.Anchor href="#" active>
        John Doe
    </Breadcrumb.Anchor>
</Breadcrumb.Container>

Palette

NOTE: Introduced feature in v0.6.0.

You can change the color palette of the Breadcrumb.Anchor / Breadcrumb.Button Components via the palette property.

<script>
    import {
        Breadcrumb,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Breadcrumb.Container>
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            DEFAULT
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="accent">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            ACCENT
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="neutral">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            NEUTRAL
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="dark">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            DARK
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="light">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            LIGHT
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="affirmative">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            AFFIRMATIVE
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="informative">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            INFORMATIVE
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container palette="negative">
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            NEGATIVE
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>
</Stack.Container>

Elements

NOTE: Introduced feature in v0.6.0.

You can render Breadcrumb items as <button> HTML tags by using <Breadcrumb.Button>, which is useful if your navigation doesn't work via URLs.

<script>
    import {
        Breadcrumb,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <Breadcrumb.Container>
        <Breadcrumb.Anchor href="#">
            Home
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#">
            Contacts
        </Breadcrumb.Anchor>

        <Breadcrumb.Anchor href="#" active>
            Anchor
        </Breadcrumb.Anchor>
    </Breadcrumb.Container>

    <Breadcrumb.Container>
        <Breadcrumb.Button>Home</Breadcrumb.Button>
        <Breadcrumb.Button>Contacts</Breadcrumb.Button>

        <Breadcrumb.Button active>
            Button
        </Breadcrumb.Button>
    </Breadcrumb.Container>
</Stack.Container>

Properties

Breadcrumb.Container

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
separator Alters the separator rendered between each breadcrumb item.
string

Breadcrumb.Anchor

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
active Alters the breadcrumb item to render bolder when active. Sets aria-current="page" on Breadcrumb.Anchor.
boolean
href Changes the URL that Breadcrumb.Anchor navigates end-users to when clicked.
string
download If linking to a downloadable file, this property will be used as the suggested file name.
string
rel Sets how the Breadcrumb.Anchor relates to the current page, see MDN for more information.
string
target Sets the target of the Breadcrumb.Anchor being navigated, see MDN for more information.
string

Breadcrumb.Button

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
active Alters the breadcrumb item to render bolder when active. Sets aria-pressed="true" on Breadcrumb.Button.
boolean

Slots

Breadcrumb.Container

Name Description Types
default Default unnamed slot.
{}

Breadcrumb.Anchor

Name Description Types
default Default unnamed slot.
{}

Breadcrumb.Button

Name Description Types
default Default unnamed slot.
{}

Breadcrumb.Group

Name Description Types
default Default unnamed slot.
{}