Commands, links, checkboxes and submenus in a popover anchored to a trigger.
c2-menu is a trigger plus a popover of commands. The trigger goes in the trigger slot — a c2-button, a c2-icon-button, a plain <button> — or stays anywhere on the page and is named by anchor. The rows are c2-menu-item children: a command, a link (href), a checkbox or a radio (type), or the parent of a nested menu slotted into submenu. <hr> draws a separator between them and <h1>–<h6> a group heading.
Activating a row fires menu-select and closes the menu, unless the menu (or that single row) is marked keep-open, which is what a list of checkbox rows wants. The surface is a native popover on the top layer positioned by c2-overlay, so it flips near the bottom of the viewport, light-dismisses on Escape and outside clicks, and is never clipped by an overflow: hidden parent.
Keyboard: Enter, Space or ArrowDown on the trigger opens the menu on its first row (ArrowUp on the last). Inside, the arrows move between enabled rows, Home and End jump to the ends, letters jump to a matching row, ArrowRight opens a submenu and ArrowLeft returns from it, and Escape or Tab closes the menu and hands focus back to the trigger.
Installation
npm install @c2n/menu
c2-menu-item ships in the same package and is registered with it.
Usage
Click any trigger below to open its menu.
ActionsNew file⌘NDuplicate⌘DRenameDelete file
Account
Signed in as ada
Profile
Name, avatar and handle
Billing
Plan, invoices and cardsSign out
StatusActive
Away
Open the guide
View
Panels
SidebarTerminal
Density
ComfortableCompact
ShareCopy link
Invite people
By emailBy Slack
More channels
SMSQR codeEmbed
The surface is as wide as its rows: --c2-menu--min-width (128px) is only a floor, and a menu that owns its trigger is never narrower than that trigger either — so a wide button opens a wide menu. fit-anchor pins it to exactly the trigger’s width, and setting the floor to 0 lets a short menu shrink to its content.
Handling a selection
menu-select bubbles from the activated row: detail.value is that row’s value, detail.checked its state after the activation, and detail.data the payload you put on the row. One listener on the menu covers every row, submenus included.
const menu = document.querySelector('c2-menu')menu.addEventListener('menu-select', (event) => { console.log(event.detail.value) // 'delete' console.log(event.detail.checked) // false for a command, the new state for a checkbox row console.log(event.detail.data) // { id: 7 }})menu.querySelector('c2-menu-item[value="delete"]').data = { id: 7 }// Open and close it from code; `show('last')` starts on the last row.menu.show()menu.hide()menu.toggle()
A trigger elsewhere on the page is named by anchor, and the menu opens beside it:
--c2-menu--* is the surface: background, a border per side, a radius per corner, shadow, padding, min-width and the max-height it starts scrolling at. --c2-menu__separator--* and --c2-menu__heading--* style the <hr> and group headings. The rows are your own children, so --c2-menu-item--* set on the menu cascades into all of them, with __hover, __focus, __disabled, __destructive states and __description, __shortcut, __icon and __indicator parts.
Every variable, with its default, is listed on the API tab, and the Gallery tab has ready-made looks to start from.
Menu
Commands, links, checkboxes and submenus in a popover anchored to a trigger.
c2-menu is a trigger plus a popover of commands. The trigger goes in the trigger slot — a c2-button, a c2-icon-button, a plain <button> — or stays anywhere on the page and is named by anchor. The rows are c2-menu-item children: a command, a link (href), a checkbox or a radio (type), or the parent of a nested menu slotted into submenu. <hr> draws a separator between them and <h1>–<h6> a group heading.
Activating a row fires menu-select and closes the menu, unless the menu (or that single row) is marked keep-open, which is what a list of checkbox rows wants. The surface is a native popover on the top layer positioned by c2-overlay, so it flips near the bottom of the viewport, light-dismisses on Escape and outside clicks, and is never clipped by an overflow: hidden parent.
Keyboard: Enter, Space or ArrowDown on the trigger opens the menu on its first row (ArrowUp on the last). Inside, the arrows move between enabled rows, Home and End jump to the ends, letters jump to a matching row, ArrowRight opens a submenu and ArrowLeft returns from it, and Escape or Tab closes the menu and hands focus back to the trigger.
Installation
npm install @c2n/menu
c2-menu-item ships in the same package and is registered with it.
Usage
Click any trigger below to open its menu.
ActionsNew file⌘NDuplicate⌘DRenameDelete file
Account
Signed in as ada
Profile
Name, avatar and handle
Billing
Plan, invoices and cardsSign out
StatusActive
Away
Open the guide
View
Panels
SidebarTerminal
Density
ComfortableCompact
ShareCopy link
Invite people
By emailBy Slack
More channels
SMSQR codeEmbed
The surface is as wide as its rows: --c2-menu--min-width (128px) is only a floor, and a menu that owns its trigger is never narrower than that trigger either — so a wide button opens a wide menu. fit-anchor pins it to exactly the trigger’s width, and setting the floor to 0 lets a short menu shrink to its content.
Handling a selection
menu-select bubbles from the activated row: detail.value is that row’s value, detail.checked its state after the activation, and detail.data the payload you put on the row. One listener on the menu covers every row, submenus included.
const menu = document.querySelector('c2-menu')menu.addEventListener('menu-select', (event) => { console.log(event.detail.value) // 'delete' console.log(event.detail.checked) // false for a command, the new state for a checkbox row console.log(event.detail.data) // { id: 7 }})menu.querySelector('c2-menu-item[value="delete"]').data = { id: 7 }// Open and close it from code; `show('last')` starts on the last row.menu.show()menu.hide()menu.toggle()
A trigger elsewhere on the page is named by anchor, and the menu opens beside it:
--c2-menu--* is the surface: background, a border per side, a radius per corner, shadow, padding, min-width and the max-height it starts scrolling at. --c2-menu__separator--* and --c2-menu__heading--* style the <hr> and group headings. The rows are your own children, so --c2-menu-item--* set on the menu cascades into all of them, with __hover, __focus, __disabled, __destructive states and __description, __shortcut, __icon and __indicator parts.
Every variable, with its default, is listed on the API tab, and the Gallery tab has ready-made looks to start from.
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