Breadcrumb

Long paths collapse their middle into an overflow menu so the first and last steps always fit. Pass a link renderer to use your router.

import { Breadcrumb } from '@andrewbehma/glass-ui';
import { Folder, House } from 'lucide-react';

Playground

Breadcrumb.tsx

import { Breadcrumb } from '@andrewbehma/glass-ui';
import { Folder, House } from 'lucide-react';

<Breadcrumb
  aria-label="Breadcrumb"
  overflowLabel="Show hidden steps"
  items={[
    { id: 'home', label: 'Workspace', href: '#', icon: House },
    { id: 'project', label: 'Glass UI', href: '#', icon: Folder },
    { id: 'page', label: 'Release checklist' },
  ]}
/>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Short
Collapsed