Morpheme

Appearance

Breadcrumbs ​

The VBreadcrumbs component is used to display a list of links that allow the user to navigate through different pages or sections of a website.

Usage ​

Basic Usage ​

To use VBreadcrumbs, you will need to import it and pass an array of VBreadcrumbItem objects as the items prop. Each VBreadcrumbItem should have a title and a to property, which will be used to display the breadcrumb and link it to a specific page.

INFO

The VBreadcrumbs component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Divider ​

  • prop: divider
  • type: string
  • default: /
  • required: false

You can use the divider prop to change the character or element used to separate the breadcrumbs.

Divider Slots ​

You can also use slots to customize the content of the divider element.

Default Slots ​

You can use the default slots of VBreadcrumbs to define the breadcrumb items and dividers manually. This can be useful if you want to customize the appearance or behavior of each breadcrumb item.

Props ​

NameTypeDefault
itemsVBreadcrumbItem[][]
dividerstring/
tagstringli
customClassstring``
activeColorstringbreadcrumbs-item--active

Events ​

None

Slots ​

The VBreadcrumbs component has the following slots:

default ​

The default slot is the default Vue slot. You can use this slot to define the breadcrumb items and dividers manually using VBreadcrumbItem and VBreadcrumbDivider components.

vue
<template>
  <VBreadcrumbs>
    <VBreadcrumbItem to="/">Home</VBreadcrumbItem>
    <VBreadcrumbDivider />
    <VBreadcrumbItem to="/account">Account</VBreadcrumbItem>
    <VBreadcrumbDivider />
    <VBreadcrumbItem to="/account/profile" disabled>Profile</VBreadcrumbItem>
  </VBreadcrumbs>
</template>
<template>
  <VBreadcrumbs>
    <VBreadcrumbItem to="/">Home</VBreadcrumbItem>
    <VBreadcrumbDivider />
    <VBreadcrumbItem to="/account">Account</VBreadcrumbItem>
    <VBreadcrumbDivider />
    <VBreadcrumbItem to="/account/profile" disabled>Profile</VBreadcrumbItem>
  </VBreadcrumbs>
</template>

divider ​

The divider slot allows you to customize the content of the divider element. This can be useful if you want to use a custom icon or element as the divider.

vue
<template>
  <VBreadcrumbs :items="items">
    <template #divider>
      <Icon name="ri:arrow-right-s-line" />
    </template>
  </VBreadcrumbs>
</template>
<template>
  <VBreadcrumbs :items="items">
    <template #divider>
      <Icon name="ri:arrow-right-s-line" />
    </template>
  </VBreadcrumbs>
</template>

CSS Variables ​

scss
:root {
  --breadcrumbs-gap: var(--size-spacing-2);
  --breadcrumbs-margin-bottom: var(--size-spacing-3);
  --breadcrumbs-font-weight: var(--font-weight-normal);
  --breadcrumbs-font-size: var(--size-font-sm);

  // item
  --breadcrumbs-item-color: var(--color-gray-600);
  --breadcrumbs-item-padding-y: var(--size-spacing-1);
  --breadcrumbs-item-padding-x: var(--size-spacing-2);
  --breadcrumbs-item-border-radius: var(--border-radius-lg);

  // item hover
  --breadcrumbs-item-hover-color: var(--color-primary-500);

  // item active
  --breadcrumbs-item-active-color: var(--color-primary-500);
  --breadcrumbs-item-active-bg-color: var(--color-primary-50);

  // item disabled
  --breadcrumbs-item-disabled-color: var(--color-primary-500);
  --breadcrumbs-item-disabled-bg-color: var(--color-primary-50);

  // divider
  --breadcrumbs-divider-font-size: var(--size-font-xs);
  --breadcrumbs-divider-font-weight: var(--font-weight-medium);
  --breadcrumbs-divider-color: var(--color-gray-500);
}
:root {
  --breadcrumbs-gap: var(--size-spacing-2);
  --breadcrumbs-margin-bottom: var(--size-spacing-3);
  --breadcrumbs-font-weight: var(--font-weight-normal);
  --breadcrumbs-font-size: var(--size-font-sm);

  // item
  --breadcrumbs-item-color: var(--color-gray-600);
  --breadcrumbs-item-padding-y: var(--size-spacing-1);
  --breadcrumbs-item-padding-x: var(--size-spacing-2);
  --breadcrumbs-item-border-radius: var(--border-radius-lg);

  // item hover
  --breadcrumbs-item-hover-color: var(--color-primary-500);

  // item active
  --breadcrumbs-item-active-color: var(--color-primary-500);
  --breadcrumbs-item-active-bg-color: var(--color-primary-50);

  // item disabled
  --breadcrumbs-item-disabled-color: var(--color-primary-500);
  --breadcrumbs-item-disabled-bg-color: var(--color-primary-50);

  // divider
  --breadcrumbs-divider-font-size: var(--size-font-xs);
  --breadcrumbs-divider-font-weight: var(--font-weight-medium);
  --breadcrumbs-divider-color: var(--color-gray-500);
}

Customization ​

You can customize the appearance of the VBreadcrumbs component using CSS variables and the theme function from Tailwind CSS.

Here is an example of how you can customize the font size and color of the breadcrumb links:

vue
<template>
  <VBreadcrumbs> Indigo Colored Breadcrumbs </VBreadcrumbs>
</template>

<style>
:root {
  --breadcrumbs-gap: theme('spacing.4');
  --breadcrumbs-margin-bottom: theme('spacing.5');
  --breadcrumbs-font-weight: theme('fontWeight.semibold');
  --breadcrumbs-item-color: theme('colors.gray.600');
  --breadcrumbs-item-hover-color: theme('colors.secondary.700');
  --breadcrumbs-item-active-color: theme('colors.secondary.500');
  --breadcrumbs-item-disabled-color: theme('colors.gray.500');
  --breadcrumbs-divider-font-size: theme('fontSize.base');
  --breadcrumbs-divider-font-weight: theme('fontWeight.semibold');
  --breadcrumbs-divider-color: theme('colors.gray.400');
}
</style>
<template>
  <VBreadcrumbs> Indigo Colored Breadcrumbs </VBreadcrumbs>
</template>

<style>
:root {
  --breadcrumbs-gap: theme('spacing.4');
  --breadcrumbs-margin-bottom: theme('spacing.5');
  --breadcrumbs-font-weight: theme('fontWeight.semibold');
  --breadcrumbs-item-color: theme('colors.gray.600');
  --breadcrumbs-item-hover-color: theme('colors.secondary.700');
  --breadcrumbs-item-active-color: theme('colors.secondary.500');
  --breadcrumbs-item-disabled-color: theme('colors.gray.500');
  --breadcrumbs-divider-font-size: theme('fontSize.base');
  --breadcrumbs-divider-font-weight: theme('fontWeight.semibold');
  --breadcrumbs-divider-color: theme('colors.gray.400');
}
</style>

Standalone Installation ​

You can also install the Breadcrumbs component individually via @morpheme/breadcrumbs package:

bash
npm install @morpheme/breadcrumbs
npm install @morpheme/breadcrumbs
vue
<script setup lang="ts">
import VBreadcrumbs, {type VBreadcrumbItem} from '@morpheme/breadcrumbs';

const items = ref<VBreadcrumbItem[]>([
  {
    title: 'Home',
    to: '/'
  },
  {
    title: 'Account',
    to: '/account'
  },
  {
    title: 'Profile',
    to: '/account/profile'
  },
])
</script>

<template>
  <VBreadcrumbs :items="items" />
</template>
<script setup lang="ts">
import VBreadcrumbs, {type VBreadcrumbItem} from '@morpheme/breadcrumbs';

const items = ref<VBreadcrumbItem[]>([
  {
    title: 'Home',
    to: '/'
  },
  {
    title: 'Account',
    to: '/account'
  },
  {
    title: 'Profile',
    to: '/account/profile'
  },
])
</script>

<template>
  <VBreadcrumbs :items="items" />
</template>

Tailwind Plugin ​

This package comes with custom tailwind plugin for styling. If you are installing this package separately from @morpheme/ui package, you need to include the plugin in plugins section in your Tailwind config file.

js
// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/breadcrumbs')],
};
// tailwind.config.js
module.exports = {
  content: [],
  plugins: [require('@morpheme/tailwind-components/breadcrumbs')],
};

Storybook ​

View Storybook documentation here.