UI Development with Chakra UI Vue — Breadcrumbs

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Breadcrumbs

Chakra UI Vue comes with a breadcrumb component we can use to add navigation.

To add it, we write:

<template>
  <c-box maxW="sm" border-width="1px" rounded="lg" overflow="hidden">
    <c-breadcrumb :add-separator="false">
      <c-breadcrumb-item>
        <c-breadcrumb-link href="/google">Breadcrumb 1</c-breadcrumb-link>
        <c-breadcrumb-separator
          color="tomato"
          font-size="10px"
          font-weight="bold"
        />
      </c-breadcrumb-item>

<c-breadcrumb-item>
        <c-breadcrumb-link href="/yahoo">Breadcrumb 2</c-breadcrumb-link>
        <c-breadcrumb-separator color="firebrick" font-size="20px" />
      </c-breadcrumb-item>

      <c-breadcrumb-item isCurrentPage>
        <c-breadcrumb-link href="/about">Breadcrumb 2</c-breadcrumb-link>
      </c-breadcrumb-item>
    </c-breadcrumb>
  </c-box>
</template>

<script>
import {
  CBox,
  CBreadcrumb,
  CBreadcrumbItem,
  CBreadcrumbLink,
  CBreadcrumbSeparator,
} from "@chakra-ui/vue";
export default {
  components: {
    CBox,
    CBreadcrumb,
    CBreadcrumbItem,
    CBreadcrumbLink,
    CBreadcrumbSeparator,
  },
};
</script>

We register the CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink, and CBreadcrumbSeparator components to add breadcrumbs into our app.

CBreadcrumb is the main container.

CBreadcrumbItem is the container for a breadcrumb item.

CBreadcrumbLink is a breadcrumb link component.

And CBreadcrumbSeparator is the breadcrumb item separator.

href has the URL to go to when we click on the link.

If we use Vue Router or Nuxt, we can as the as prop to router-link or nuxt-link respectively.

And we set the URL with the to prop instead of href .

Conclusion

We can add breadcrumbs into our Vue app with Chakra UI Vue.