c2n/web-componentsv0.0.6
GitHub repository

Navigation Menu

Site navigation bar whose triggers open panels of links below the header.

c2-navigation-menu

Attributes

NameTypeDefaultDescription
valuestring—The `value` of the item whose panel is open; `''` closes the bar. Set it to open a panel from code.
aria-labelstring | nullnullAccessible name of the navigation landmark.
open-on'hover' | 'click'hover`hover` opens a panel on pointer intent (and on click); `click` waits for a click or the keyboard.
open-delaynumber150Pointer intent before the first panel opens, in milliseconds. A panel switch is always immediate.
close-delaynumber300Grace period before a panel closes once the pointer has left both the item and the panel, in milliseconds.
panel-anchor'item' | 'menu'item`item` opens each panel under its own item; `menu` aligns every panel to the bar, for full-width mega panels.
modeNavigationMenuModebar`bar` shows the row of items; `mobile` shows one button that opens the whole navigation as a hierarchy list.
collapsiblebooleanfalseIn `mobile` mode, groups open one at a time instead of all being listed at once.
mobile-breakpointnumber0Viewport width, in pixels, at or below which the bar switches itself to `mobile` — and back to `bar` above it. Leave it at `0` to own `mode` yourself, which is what a breakpoint that depends on something other than the window needs.
mobile-labelstringMenuAccessible name of the button shown in `mobile` mode.
mobile-openbooleanfalseWhether the `mobile` button's list is showing.

Events

NameTypeDescription
value-changeCustomEvent<ValueChangeEventDetail>Fired after the open panel changes. `detail.value` is the `value` of the open item, or `''` when the bar closed.

CSS custom properties

Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.

NameTypeDefaultDescription
--c2-navigation-menu--gappixel4pxSpace between the items.
--c2-navigation-menu--backgroundcolor—
--c2-navigation-menu--padding-toppadding0px
--c2-navigation-menu--padding-rightpadding0px
--c2-navigation-menu--padding-bottompadding0px
--c2-navigation-menu--padding-leftpadding0px
--c2-navigation-menu--border-top-left-radiusborder-radius—
--c2-navigation-menu--border-top-right-radiusborder-radius—
--c2-navigation-menu--border-bottom-left-radiusborder-radius—
--c2-navigation-menu--border-bottom-right-radiusborder-radius—
--c2-navigation-menu--border-topborder—
--c2-navigation-menu--border-rightborder—
--c2-navigation-menu--border-bottomborder—
--c2-navigation-menu--border-leftborder—
--c2-navigation-menu--box-shadowbox-shadow—
--c2-navigation-menu__mobile-trigger--sizepixel40px
--c2-navigation-menu__mobile-trigger--colorcolor#18181b
--c2-navigation-menu__mobile-trigger--backgroundcolortransparent
--c2-navigation-menu__mobile-trigger--borderborder1px solid #e4e4e7
--c2-navigation-menu__mobile-trigger--border-radiusborder-radius8px
--c2-navigation-menu__mobile-trigger__icon--sizepixel20px
--c2-navigation-menu__mobile-trigger__hover--backgroundcolor#f4f4f5
--c2-navigation-menu__mobile-trigger__hover--colorcolor—
--c2-navigation-menu__mobile-trigger__focus--outlineoutline2px solid rgba(2, 101, 220, 0.4)
--c2-navigation-menu__mobile-trigger__focus--outline-offsetpixel1px
--c2-navigation-menu__mobile-panel--backgroundcolor#ffffff
--c2-navigation-menu__mobile-panel--min-widthpixel260pxSet it to `calc(100vw - 32px)` for a sheet that spans the screen.
--c2-navigation-menu__mobile-panel--max-widthpixel—
--c2-navigation-menu__mobile-panel--max-heightpixelmin(80vh, var(--c2-overlay--available-height, 80vh))The list scrolls past this height.
--c2-navigation-menu__mobile-panel--gappixel2pxSpace between the rows and groups.
--c2-navigation-menu__mobile-panel--border-topborder1px solid #e4e4e7
--c2-navigation-menu__mobile-panel--border-rightborder1px solid #e4e4e7
--c2-navigation-menu__mobile-panel--border-bottomborder1px solid #e4e4e7
--c2-navigation-menu__mobile-panel--border-leftborder1px solid #e4e4e7
--c2-navigation-menu__mobile-panel--border-top-left-radiusborder-radius8px
--c2-navigation-menu__mobile-panel--border-top-right-radiusborder-radius8px
--c2-navigation-menu__mobile-panel--border-bottom-left-radiusborder-radius8px
--c2-navigation-menu__mobile-panel--border-bottom-right-radiusborder-radius8px
--c2-navigation-menu__mobile-panel--box-shadowbox-shadow0 8px 24px rgba(24, 24, 27, 0.08)
--c2-navigation-menu__mobile-panel--padding-toppadding8px
--c2-navigation-menu__mobile-panel--padding-rightpadding8px
--c2-navigation-menu__mobile-panel--padding-bottompadding8px
--c2-navigation-menu__mobile-panel--padding-leftpadding8px

c2-navigation-menu-item

Attributes

NameTypeDefaultDescription
valuestring—Identifies the item in the bar's `value`. The bar fills in `item-` when the markup omits it.
hrefstring | undefined—Makes the item a link. An item with panel content is always a trigger, even with an `href`.
targetstring | undefined—
currentbooleanfalseThe entry of the page being shown: announced as `aria-current="page"` and styled with the `__current` variables.
disabledbooleanfalseDims the item and ignores pointer and keyboard.
labelstring | undefined—Label used as the default slot's fallback content.
expandedbooleanfalseWhether the panel is open. Set by the parent bar; announced as `aria-expanded`.
current-groupbooleanfalseWhether the current page is one of this item's panel rows. The item maintains it as the panel changes; style it with the `__current` variables, or with the `current-group` attribute for a look of its own.
placementPlacementbottom-startPreferred placement of the panel (floating-ui names).
mobilebooleanfalseSet by the bar in `mobile` mode: the item becomes one entry of a hierarchy list — a row for a link, a heading with its panel's rows underneath for a trigger — instead of a trigger with a popover.
collapsiblebooleanfalseSet by the bar's `collapsible`: in `mobile` mode the heading becomes a button that opens and closes the group.

Events

NameTypeDescription
panel-toggleCustomEvent<PanelToggleEventDetail>Fired after the panel opens or closes, including when the browser light-dismisses it.

CSS custom properties

Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.

NameTypeDefaultDescription
--c2-navigation-menu-item--min-heightpixel36px
--c2-navigation-menu-item--gappixel6pxSpace between the icons and the label.
--c2-navigation-menu-item--padding-toppadding8px
--c2-navigation-menu-item--padding-rightpadding12px
--c2-navigation-menu-item--padding-bottompadding8px
--c2-navigation-menu-item--padding-leftpadding12px
--c2-navigation-menu-item--border-top-left-radiusborder-radius6px
--c2-navigation-menu-item--border-top-right-radiusborder-radius6px
--c2-navigation-menu-item--border-bottom-left-radiusborder-radius6px
--c2-navigation-menu-item--border-bottom-right-radiusborder-radius6px
--c2-navigation-menu-item--font-sizefont-size14px
--c2-navigation-menu-item--font-weightfont-weight500
--c2-navigation-menu-item--font-stylefont-style—
--c2-navigation-menu-item--font-familyfont-family—
--c2-navigation-menu-item--colorcolor#71717a
--c2-navigation-menu-item--backgroundcolortransparent
--c2-navigation-menu-item__hover--colorcolor#18181b
--c2-navigation-menu-item__hover--backgroundcolor#f4f4f5
--c2-navigation-menu-item__expanded--colorcolor#18181b
--c2-navigation-menu-item__expanded--backgroundcolor#f4f4f5
--c2-navigation-menu-item__expanded--border-bottom-left-radiusborder-radius0pxSquare by default, so an open trigger and its panel read as one surface.
--c2-navigation-menu-item__expanded--border-bottom-right-radiusborder-radius0px
--c2-navigation-menu-item__current--colorcolor#18181bAlso used while `current-group` is set.
--c2-navigation-menu-item__current--font-weightfont-weight600
--c2-navigation-menu-item__current--backgroundcolor—
--c2-navigation-menu-item__indicator--colorcolorrgb(2, 101, 220)The line under an item that is current, holds the current row, or is expanded. Not drawn in the mobile list, where the current row is marked by `__current--color`.
--c2-navigation-menu-item__indicator--heightpixel2px
--c2-navigation-menu-item__indicator--bottompixel0px
--c2-navigation-menu-item__indicator--insetpixel0pxHow far the line stops short of the item on each side; `0` spans its whole width.
--c2-navigation-menu-item__indicator--border-radiusborder-radius999px
--c2-navigation-menu-item__icon--sizepixel16px
--c2-navigation-menu-item__icon--colorcolor—Defaults to the label colour.
--c2-navigation-menu-item__focus--outlineoutline2px solid rgba(2, 101, 220, 0.4)
--c2-navigation-menu-item__focus--outline-offsetpixel1px
--c2-navigation-menu-item__disabled--opacityopacity0.38
--c2-navigation-menu-item__mobile-heading--colorcolor#71717aThe group heading in the mobile list.
--c2-navigation-menu-item__mobile-heading--font-sizefont-size11px
--c2-navigation-menu-item__mobile-heading--font-weightfont-weight600
--c2-navigation-menu-item__mobile-heading--letter-spacingletter-spacing0.06em
--c2-navigation-menu-item__mobile-heading--text-transformtext-transformuppercase
--c2-navigation-menu-item__mobile-heading--padding-toppadding10px
--c2-navigation-menu-item__mobile-heading--padding-rightpadding8px
--c2-navigation-menu-item__mobile-heading--padding-bottompadding4px
--c2-navigation-menu-item__mobile-heading--padding-leftpadding8pxAlso the inset of a top-level row in the mobile list, so the two line up.
--c2-navigation-menu-item__mobile-heading__chevron--sizepixel16pxThe toggle chevron of a collapsible group.
--c2-navigation-menu-item__mobile-group--indentpixel12pxHow far the rows of a group are inset.
--c2-navigation-menu-item__panel--backgroundcolor#ffffff
--c2-navigation-menu-item__panel--min-widthpixel260px
--c2-navigation-menu-item__panel--max-widthpixel—
--c2-navigation-menu-item__panel--max-heightpixelmin(70vh, var(--c2-overlay--available-height, 70vh))The panel scrolls past this height.
--c2-navigation-menu-item__panel--border-topborder1px solid #e4e4e7
--c2-navigation-menu-item__panel--border-rightborder1px solid #e4e4e7
--c2-navigation-menu-item__panel--border-bottomborder1px solid #e4e4e7
--c2-navigation-menu-item__panel--border-leftborder1px solid #e4e4e7
--c2-navigation-menu-item__panel--border-top-left-radiusborder-radius8px
--c2-navigation-menu-item__panel--border-top-right-radiusborder-radius8px
--c2-navigation-menu-item__panel--border-bottom-left-radiusborder-radius8px
--c2-navigation-menu-item__panel--border-bottom-right-radiusborder-radius8px
--c2-navigation-menu-item__panel--box-shadowbox-shadow0 8px 24px rgba(24, 24, 27, 0.08)
--c2-navigation-menu-item__panel--padding-toppadding8px
--c2-navigation-menu-item__panel--padding-rightpadding8px
--c2-navigation-menu-item__panel--padding-bottompadding8px
--c2-navigation-menu-item__panel--padding-leftpadding8px

c2-navigation-menu-link

NameTypeDefaultDescription
hrefstring | undefined—
targetstring | undefined—
currentbooleanfalseThe link to the page being shown: announced as `aria-current="page"` and styled with the `__current` variables.
disabledbooleanfalseDims the row and ignores clicks; the row stops being a link.
labelstring | undefined—Title used as the default slot's fallback content.

Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.

NameTypeDefaultDescription
--c2-navigation-menu-link--gappixel10pxSpace between the icons and the text.
--c2-navigation-menu-link--padding-toppadding8px
--c2-navigation-menu-link--padding-rightpadding10px
--c2-navigation-menu-link--padding-bottompadding8px
--c2-navigation-menu-link--padding-leftpadding10px
--c2-navigation-menu-link--border-top-left-radiusborder-radius6px
--c2-navigation-menu-link--border-top-right-radiusborder-radius6px
--c2-navigation-menu-link--border-bottom-left-radiusborder-radius6px
--c2-navigation-menu-link--border-bottom-right-radiusborder-radius6px
--c2-navigation-menu-link--font-sizefont-size14px
--c2-navigation-menu-link--font-weightfont-weight500
--c2-navigation-menu-link--line-heightpixel20px
--c2-navigation-menu-link--colorcolor#18181b
--c2-navigation-menu-link--backgroundcolortransparent
--c2-navigation-menu-link__hover--backgroundcolor#f4f4f5
--c2-navigation-menu-link__hover--colorcolor—Defaults to the title colour.
--c2-navigation-menu-link__current--colorcolorrgb(2, 101, 220)
--c2-navigation-menu-link__current--backgroundcolor#edf1fe
--c2-navigation-menu-link__description--colorcolor#71717a
--c2-navigation-menu-link__description--font-sizefont-size12px
--c2-navigation-menu-link__description--line-heightpixel16px
--c2-navigation-menu-link__description--font-weightfont-weight400
--c2-navigation-menu-link__description--margin-toppixel2px
--c2-navigation-menu-link__icon--sizepixel18px
--c2-navigation-menu-link__icon--colorcolor#71717a
--c2-navigation-menu-link__focus--outlineoutline2px solid rgba(2, 101, 220, 0.4)
--c2-navigation-menu-link__focus--outline-offsetpixel-2px
--c2-navigation-menu-link__disabled--opacityopacity0.38
escAccordionConnected, animated panels with shared borders and single or multiple expansion.LayoutAvatarImage, initials or icon for a person, with status dot and badge.Data displayBadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.Data displayBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationButtonThemeable button with slots for text, prefix, suffix and running icons.ButtonsButton GroupAttached buttons with shared borders, optionally a segmented control with single or multiple selection.ButtonsCardGroups related content and actions on a single bordered surface.LayoutChat InputAuto-growing message box with a send button for chat interfaces.ChatChat MessageOne chat bubble with avatar, title, timestamp and message body.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.InputsCode ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Data displayColor AreaTwo-dimensional area for picking saturation and value of a colour.InputsColor SelectColour swatch that opens a full picker built from area and slider.InputsColor SliderHorizontal slider for choosing a hue from 0 to 360.InputsCopy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.ButtonsDetailsCollapsible disclosure built on native details and summary.LayoutIcon ButtonRound, hoverable button wrapping a slotted SVG icon.ButtonsKbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data displayLabelCaption that names and activates the control referenced by its for attribute, with a required marker.InputsLink ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.NavigationListVertical list container with single or multiple selection.Data displayList ItemSelectable row with icon slots, used on its own or as the option of list and select.Data displayMenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.NavigationModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.FeedbackNavigation MenuSite navigation bar whose triggers open panels of links below the header.NavigationOverlayAnchored popup built on the browser Popover API, positioned with floating-ui.FeedbackPaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.NavigationProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.FeedbackRadioRadio options built on native inputs, grouped into one value with keyboard navigation.InputsSelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.InputsSeperatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.LayoutSheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.FeedbackSide NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.NavigationSkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.FeedbackSliderRange input with a themeable track, thumb, step ticks and value bubble.InputsSpinnerCircular progress indicator, indeterminate or showing a value, with optional text.FeedbackSwitchOn/off toggle on a native switch input, with label, description and thumb icons.InputsTableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.Data displayTabsTab strip that shows one content panel at a time.NavigationText FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.InputsTextareaMultiline text input with resizing, helper and error text, and a character counter.InputsToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.FeedbackTooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.FeedbackFeather Icons287 open-source Feather icons, one web component each.IconsMat Icon2,234 Material Icons ligatures rendered through a single element.IconsPhosphor Icons1,512 flexible icons in six weights, one web component each.IconsThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.GuideUsing c2n in an applicationThe workflow behind every c2n app: load the theme once, use c2-* tags directly, and turn every repeated pattern into a small variant or composed component.Guide