<nav aria-label="Breadcrumbs" class="gi-breadcrumbs"> <ol role="list"> <li role="listitem"> <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a> </li> <li role="listitem"> <div aria-hidden="true"> <span class="material-symbols-outlined gi-gray-700">more_horiz</span> </div> </li> <li role="listitem"> <a href="/docs" class="gi-link gi-link-inherit" aria-label="Documentation page">Documentation</a> </li> <li role="listitem"> <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page" aria-current="page">Travel abroad</a> </li> </ol> </nav>
{{govieBreadcrumbs({
navItems: [
{ "label": "Home", "href": "/home" },
{ "ellipsis": true },
{ "label": "Documentation", "href": "/docs" },
{ "label": "Travel abroad", "href": "/travel", "currentPage": true }
]})
}}
import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipsis, BreadcrumbCurrentLink } from '@govie-ds/react'; <Breadcrumbs> <BreadcrumbLink href="/home">Home</BreadcrumbLink> <BreadcrumbEllipsis /> <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink> <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink> </Breadcrumbs>
Use breadcrumbs to help users understand their location within a website or application hierarchy and navigate back to higher levels easily.
Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)
Figma Library | Considering |
Local HTML | Stable |
Global HTML | Beta |
Global React | Beta |