# Breadcrumbs ## Visual Structure ``` ga-breadcrumb └── ga-breadcrumb-item [--link|--overflow|--current-page|--back] ├── ga-breadcrumb-item__trigger │ └── ga-breadcrumb-item__label (optional) ├── ga-breadcrumb-item__explorer (optional, button — opens sibling menu) │ └── ga-icon ├── ga-breadcrumb-item__separator (optional) └── ga-breadcrumb-item__menu (optional, overflow only) ``` ## Elements Hierarchy ### Core Block - `ga-breadcrumb` - Main container for the breadcrumb navigation ### Mandatory Elements - `ga-breadcrumb-item` - Individual breadcrumb item, must use one of the item modifiers - `ga-breadcrumb-item__trigger` - Clickable trigger element inside each item ### Optional Elements - `ga-breadcrumb-item__label` - Text label inside the trigger (truncated with ellipsis when overflowing) - `ga-breadcrumb-item__separator` - Separator character between items (present on `--link` and `--overflow` items) - `ga-breadcrumb-item__menu` - Dropdown menu panel revealed by the overflow trigger - `ga-breadcrumb-item__group` - Wrapper that groups the trigger and explorer button together; manages focus outline at the group level so inner elements suppress their own outlines ### Modifiers #### Item Type Modifiers - `ga-breadcrumb-item--link` - A navigable ancestor link; shows underline on hover and uses action text color - `ga-breadcrumb-item--overflow` - A collapsed group of hidden items; displays a trigger that opens a dropdown menu - `ga-breadcrumb-item--current-page` - The last item representing the current page; rendered in bold, non-navigable style - `ga-breadcrumb-item--back` - A mobile-style back navigation item; displays an icon alongside a bold label, with action-colored icon that updates on hover ## Examples ### Standard Navigation ```html
``` ### Deep Navigation ```html
``` ### Explorer ```html

Hover — text underlines, chevron becomes the target for opening a sibling menu

Active — chevron clicked, menu lists sibling pay run periods

``` ### Overflow ```html

Full breadcrumb trail

Administration tier is hidden

Deeper nesting, only last two items visible

Extreme viewport, only current page visible

Mobile view

``` ### Overflow Active ```html ``` ### Truncation ```html

Single truncated link item — hover shows full label via tooltip

Multiple truncated items — 4-level path where slot 2 and 3 are long

Current-page item — last to truncate, always shows full title as page heading when possible

```