Breadcrumbs

Breadcrumbs provide hierarchical navigation context. They help users understand their position within the application and navigate back to parent pages.

Usage

import { Breadcrumbs } from '@gtcx/ui';
 
<Breadcrumbs
  items={[
    { label: 'Home', path: '/' },
    { label: 'Users', path: '/users' },
    { label: 'Jane Doe' },  // Last item has no path (current page)
  ]}
/>

With Icons

<Breadcrumbs
  items={[
    { label: 'Home', path: '/', icon: <Home size={14} /> },
    { label: 'Settings', path: '/settings', icon: <Settings size={14} /> },
    { label: 'Security' },
  ]}
/>

In Toolbar

Breadcrumbs are commonly used in the Toolbar component:

import { Toolbar } from '@gtcx/ui';
 
<Toolbar
  title="Security Settings"
  breadcrumbs={[
    { label: 'Home', path: '/' },
    { label: 'Settings', path: '/settings' },
    { label: 'Security' },
  ]}
  actions={<Button>Save Changes</Button>}
/>

Guidelines

Always include the root page (Home) as the first item
The last item should be the current page (no link)
Keep labels concise — truncate with ellipsis if needed
Use breadcrumbs on all pages below the top level

Menus Tabs