Breadcrumb

Indicate the current page’s location depth using a navigation list that automatically adds separators using CSS.

Separators are automatically added in CSS through ::before and content. You can change the separator by changing the $breadcrumb-divider Sass variable.

<i-breadcrumb>
    <i-breadcrumb-item>Home</i-breadcrumb-item>
    <i-breadcrumb-item active>Breadcrumbs</i-breadcrumb-item>
</i-breadcrumb>

Dynamically Generated

You can generate and bind breadcrumbs from your JS data using a combination of v-for and v-bind as follows:

<i-breadcrumb>
    <i-breadcrumb-item v-bind="item" v-for="item in items" :key="item.title">
        {{item.title}}
    </i-breadcrumb-item>
</i-breadcrumb>

Color Variants

Inkline includes predefined breadcrumb color variants, each serving its own semantic purpose, which you can control using the color property.

<i-breadcrumb color="light">
    <i-breadcrumb-item href="/">Home</i-breadcrumb-item>
    <i-breadcrumb-item active>Light</i-breadcrumb-item>
</i-breadcrumb>

<i-breadcrumb color="dark">
    <i-breadcrumb-item href="/">Home</i-breadcrumb-item>
    <i-breadcrumb-item active>Dark</i-breadcrumb-item>
</i-breadcrumb>

Size Variants

You’re able to use the size modifier to control the text and spacing size of your breadcrumb, using one of the available sizes: sm, md, and lg.

<i-breadcrumb size="sm">
    <i-breadcrumb-item href="/">Sizes</i-breadcrumb-item>
    <i-breadcrumb-item active>Small</i-breadcrumb-item>
</i-breadcrumb>

<i-breadcrumb size="md">
    <i-breadcrumb-item href="/">Sizes</i-breadcrumb-item>
    <i-breadcrumb-item active>Medium</i-breadcrumb-item>
</i-breadcrumb>

<i-breadcrumb size="lg">
    <i-breadcrumb-item href="/">Sizes</i-breadcrumb-item>
    <i-breadcrumb-item active>Large</i-breadcrumb-item>
</i-breadcrumb>

Linking and Routing

Breadcrumb items will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.

The <i-breadcrumb-item> component is well integrated with the Vue Router plugin and will be converted to a <router-link> when using the to property.

<i-breadcrumb>
    <i-breadcrumb-item href="/">Home</i-breadcrumb-item>
    <i-breadcrumb-item :to="{ name: 'docs' }">Library</i-breadcrumb-item>
    <i-breadcrumb-item>Example</i-breadcrumb-item>
    <i-breadcrumb-item active>Data</i-breadcrumb-item>
</i-breadcrumb>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    ariaLabel
    TypeString
    DefaultBreadcrumbs
    Description The aria-label of the breadcrumbs
  • Property
    color
    Type'light' | 'dark'
    Default'light'
    Description The color variant of the breadcrumb
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the breadcrumb

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default breadcrumb content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----color
    Valuecolor('gray-90')
    Description The text color of the breadcrumb component
  • Property
    ----color--link
    Valuecolor('primary')
    Description The link color of the breadcrumb component
  • Property
    ----color--active
    Valuecolor('gray-70')
    Description The text active color of the breadcrumb component
  • Property
    ----font-size
    Valuefont-size()
    Description The font size of the breadcrumb component
  • Property
    ----margin-bottom
    Valuespacing()
    Description The bottom margin of the breadcrumb component
  • Property
    ----padding-right
    Valuevar(--padding-right)
    Description The padding right of the breadcrumb component
  • Property
    ----padding-left
    Valuevar(--padding-left)
    Description The padding left of the breadcrumb component