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.
Dynamically Generated
You can generate and bind breadcrumbs from your JS data using a combination of v-for
and v-bind
as follows:
Color Variants
Inkline includes predefined breadcrumb color variants, each serving its own semantic purpose, which you can control using the color
property.
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
.
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.
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