Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Breadcrumb

Breadcrumb renders hierarchical page trails for navigation context.

CoreNavigation@gaudi/design-system/core/BreadcrumbView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Breadcrumb } from '@gaudi/design-system/core/Breadcrumb';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/breadcrumb-collapsed-path.json.

Usage

import { BreadcrumbTrail } from '@gaudi/design-system';
<BreadcrumbTrail  items={[    { href: '/', label: 'Home' },    { href: '/blog', label: 'Blog' },    { current: true, label: 'Design Systems' },  ]}/>

Examples

Collapsed path with menu

Storybook

Contained and button styles

Storybook

Icons, badges and avatars

Storybook

Separators

Storybook

Workspace, user and document

Storybook

API

6 props

Accessibility

Breadcrumb renders a nav landmark, ordered list, real links for ancestors, and aria-current on the current page.

ItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examplesLinkLink centralizes navigation semantics for internal, anchor, and external links.CardCard frames reusable content with title, subtitle, and optional children.8 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesPillPill renders compact category and status labels.4 examples