AisBreadcrumb

AisBreadcrumb is a component that displays the current page location within a navigational hierarchy. It is used to show the user's current location within the application and to provide a clickable path back to the root page.

Use the crumbs prop to pass an array of crumb objects. The crumb object can have the following attributes:

{ 
  label: 'Crumb Label', 
  icon: 'users', 
  to: '/some/path', 
  href: '/some/path'
  current: true
}

Label and Icon

The label attribute sets the text of the crumb. The icon attribute sets the icon that will be displayed next to the label of the breadcrumb. It accepts either an object imported from the FontAwesome icon packs or a string specifying one of the preloaded, core icons.

1. College
2. >
3. Users
4. >
5. Admin
6. >
7. Michael Jordan

<template>
  <AisBreadcrumb :crumbs="items" />
</template>

<script setup>
import { AisBreadcrumb } from '@ais-public/ais-components';
import { faLandmarkDome } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
library.add( faLandmarkDome )

const items = [
  { label: 'College', icon: faLandmarkDome },
  { label: 'Users', icon: 'users' },
  { label: 'Admin', icon: 'locked' },
  { label: 'Michael Jordan' },
]

</script>

Links

Use the to attribute set the path when using vue/nuxt routing. Otherwise use the href attribute.

1. Users
2. >
3. Admin
4. >
5. Michael Jordan

1. Users
2. >
3. Admin
4. >
5. Michael Jordan

<template>
  <div class="flex flex-col gap-2">
    <AisBreadcrumb :crumbs="toCrumbs" />
    <AisBreadcrumb :crumbs="hrefCrumbs" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AisBreadcrumb } from '@ais-public/ais-components';

const toCrumbs = ref([
  { label: 'Users', to: '/users' },
  { label: 'Admin', to: '/users/admin' },
  { label: 'Michael Jordan', current: true },
])

const hrefCrumbs = ref([
  { label: 'Users', href: '/users' },
  { label: 'Admin', href: '/users/admin' },
  { label: 'Michael Jordan', current: true },
])
</script>

Current Breadcrumb

If the current page is represented in the list of breadcrumbs, the current attribute should be set to true. The accessibility attribute aria-current will be set to page.

Delimiter

Use the delimiter prop to customize the delimiter between each breadcrumb. The default value is >.

1. Users
2. /
3. Admin
4. /
5. Michael Jordan

<template>
  <AisBreadcrumb :crumbs="items" delimiter="/"/>
</template>

<script setup>
import { AisBreadcrumb } from "@ais-public/ais-components";
const items = [
  { label: 'Users', to: '/users', icon: 'users' },
  { label: 'Admin', to: '/users/admin', icon: 'locked' },
  { label: 'Michael Jordan', icon: 'user' },
];
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
crumbs	Array		[]	Collection of breadcrumb objects. Attributes on a breadcrumb object: `label`, `icon`, `to`, `href`, `current`	false
delimiter	String		'>'	Sets the delimiter between each breadcrumb	false

Slots

Name	Scoped	Description
default	No	Slot to customize the breadcrumb label

Events

Event	Arguments	Description