sdxc

Type to search, or start from one of these:

All guidesAll packages

Section

A grouping wrapper for a set of related items inside a listbox, menu, or combobox.

View code
<Button commandfor="preview-account-menu" command="toggle-popover" variant="outline">
	Sergio Xalambrí
</Button>
<Menu id="preview-account-menu" aria-label="Account" mix={[menuKeys()]}>
	<Section aria-labelledby="preview-account-heading">
		<Header id="preview-account-heading">Account</Header>
		<Menu.Item href="/settings/profile">
			<UserIcon aria-hidden="true" />
			Profile
		</Menu.Item>
		<Menu.Item href="/settings/billing">
			<CreditCardIcon aria-hidden="true" />
			Billing
		</Menu.Item>
	</Section>

	<Menu.Separator />

	<Section aria-labelledby="preview-workspace-heading">
		<Header id="preview-workspace-heading">Workspace</Header>
		<Menu.Item href="/settings/members">
			<UsersIcon aria-hidden="true" />
			Members
		</Menu.Item>
		<Menu.Item href="/settings/general">
			<SettingsIcon aria-hidden="true" />
			General
		</Menu.Item>
	</Section>

	<Menu.Separator />

	<Menu.Item danger>
		<LogOutIcon aria-hidden="true" />
		Sign out
	</Menu.Item>
</Menu>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui
import "@sdxc/ui/theme.css";

Usage

import { Section } from "@sdxc/ui";

Renders its children inside a <section> element with small block-axis padding, separating one group of items from its siblings inside a listbox, menu, or combobox; pair it with a Header to label the group.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"section">.