Styling contract
Menubar styling stays public. The primitive emits stable data-slot, ARIA, and state attributes on the strip and its triggers; menu panel styling continues through tngMenu and tngMenuItem.
CSS contract table
| Selector | Applied on | Purpose |
|---|---|---|
[data-slot='menubar'] | Menubar host | Layout, surface, spacing, and overall strip elevation. |
[data-slot='menubar-item'] | Top-level trigger | Trigger spacing, typography, hover/focus affordance, and current tab stop styling. |
[data-slot='menubar-item'][aria-expanded='true'] | Open trigger | Current open-menu trigger state. |
[tngMenu][data-state='open'] | Owned menu panel | Panel background, border, placement, and elevation. |
[tngMenuItem][data-active] | Active menu row | Keyboard-active row styling inside the panel. |
Menubar contract starter
css
[data-slot='menubar'] {
display: inline-flex;
gap: 0.35rem;
padding: var(--tng-menubar-padding, 0.3rem);
border-radius: var(--tng-menubar-radius, 0.9rem);
}
[data-slot='menubar-item'] {
padding-inline: var(--tng-menubar-item-px, 0.85rem);
}
[data-slot='menubar-item'][aria-expanded='true'] {
background: color-mix(in srgb, var(--tng-menubar-brand) 14%, var(--tng-menubar-bg));
}
Theme tokens
| Variable | Purpose |
|---|---|
--tng-menubar-radius | Rounds the strip and drives the inner item radius relationship. |
--tng-menubar-padding | Controls the strip padding around top-level triggers. |
--tng-menubar-item-px | Adjusts the horizontal padding inside each top-level trigger. |
--tng-menubar-brand, --tng-menubar-focus-ring | Open, hover, and current-tab-stop emphasis colors. |
--tng-menubar-bg, --tng-menubar-surface | Surface blend used for the strip background. |
The menu panels themselves are still styled through the shared Menu primitive contract, so a full Menubar theme usually includes both menubar and menu selectors.
State selectors
Lean on the emitted attributes instead of internal DOM assumptions. That keeps headless layouts portable across plain CSS and utility-driven shells.
State selector starter
css
.docs-menubar-shell [data-slot='menubar-item'][tabindex='0'] {
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24);
background: rgba(37, 99, 235, 0.12);
}
.docs-menubar-panel [tngMenuItem][data-active] {
color: #1d4ed8;
background: rgba(37, 99, 235, 0.16);
}
.docs-menubar-panel [tngMenuItem][aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
}