Brand Breadcrumb · Snyder brandOS

Component primitive

<brand-breadcrumb> keeps hierarchy visible without competing with the page title. Separators are built in, and the final item communicates the current location.

<brand-breadcrumb>Framework-agnostic custom element

Light themeSemantic surface

Dark themeSame component API

Element: <brand-breadcrumb>
Library: Brand
Runtime: Web Component
Theming: Semantic tokens

Basic

Home

Components

brandOS

Deep hierarchy

Home

Components

Brand Components

Breadcrumb

With icons

Home

Workspace

Members

Usage

import { BrandBreadcrumb } from '@brandos/ui';

<brand-breadcrumb>
  <wa-breadcrumb-item href="/">Home</wa-breadcrumb-item>
  <wa-breadcrumb-item href="/components">Components</wa-breadcrumb-item>
  <wa-breadcrumb-item aria-current="page">brandOS</wa-breadcrumb-item>
</brand-breadcrumb>