MenuGroup

A labeled group for related items inside a MenuList.

Usage

Use inside MenuList, grouping MenuItems.

Svelte

<MenuList>
  <MenuGroup label="Group" {...props}>
    <MenuItem {...props}>Item</MenuItem>
  </MenuGroup>
</MenuList>

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte

<div class="whole" {...rest} role="group" aria-labelledby={uid}>
  <div id={uid} class="label">{label}</div>
  {children}
</div>

When embedded in MenuList, variant defaults to the menu's and styling falls back to it; local styling wins.

Props

Name	Type	Default	Description
`children*`	`Snippet`	-	Grouped `MenuItem`s; receives the variant as its argument
`label*`	`Snippet`	-	Required accessible name rendered in the `label` part and referenced by `aria-labelledby`
`attach`	`Attachment`	-	Svelte attachment on the root group
`element`	`HTMLDivElement`	-	Bindable root element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Group variant

* required. Other HTMLAttributes are passed to <div> via rest props; class is merged onto the root.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-menu-group

Behavior

When embedded in MenuList, variant defaults to the menu's and styling falls back to it; local styling wins.

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Group (whole <div>): role="group" and aria-labelledby pointing to the rendered label part.

Provide the required label prop for the group's accessible name; the component renders it and wires it with aria-labelledby.

Exports

Types

TypeScript

interface MenuGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> {
  children: Snippet<[string]>; // Snippet<[variant]>; grouped MenuItems
  label: string | Snippet<[string]>; // required accessible name, rendered and referenced by aria-labelledby
  attach?: Attachment<HTMLDivElement>;
  element?: HTMLDivElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other HTMLAttributes are passed to <div> via ...rest; `class` is merged onto root
  // role and aria-labelledby are component-owned
}
type MenuGroupReqdProps = "children" | "label";
type MenuGroupBindProps = "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Svelte

<script lang="ts">
  import { MenuGroup, MenuItem, MenuList } from "svseeds";

  let { variant = $bindable() } = $props();
  const variantStyle1 = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const variantStyle2 = {
    neutral: "text-gray-500 dark:text-gray-400",
    active: "text-teal-700 dark:text-teal-300",
    inactive: "text-red-700 dark:text-red-300",
    blue: "text-blue-700 dark:text-blue-300",
    yellow: "text-yellow-700 dark:text-yellow-300",
    sky: "text-sky-700 dark:text-sky-300",
  };
  const variantStyle3 = {
    neutral: "hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-800 dark:focus:bg-gray-800",
    active: "hover:bg-teal-100 focus:bg-teal-100 dark:hover:bg-teal-900 dark:focus:bg-teal-900",
    inactive: "hover:bg-red-100 focus:bg-red-100 dark:hover:bg-red-900 dark:focus:bg-red-900",
    blue: "hover:bg-blue-100 focus:bg-blue-100 dark:hover:bg-blue-900 dark:focus:bg-blue-900",
    yellow: "hover:bg-yellow-100 focus:bg-yellow-100 dark:hover:bg-yellow-900 dark:focus:bg-yellow-900",
    sky: "hover:bg-sky-100 focus:bg-sky-100 dark:hover:bg-sky-900 dark:focus:bg-sky-900",
  };
  const childStyle1 = {
    whole: {
      base: "flex min-w-48 flex-col gap-2 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const styling = {
    whole: "space-y-1",
    label: {
      base: "px-2 py-1 text-xs font-semibold uppercase",
      ...variantStyle2,
    },
  };
  const childStyle2 = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm focus:outline-hidden",
      ...variantStyle3,
    },
  };
</script>

<MenuList {variant} styling={childStyle1}>
  <MenuGroup label="Project" {styling}>
    <MenuItem styling={childStyle2}>New file</MenuItem>
    <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  </MenuGroup>
  <MenuGroup label="Account" {styling}>
    <MenuItem styling={childStyle2}>Profile</MenuItem>
    <MenuItem styling={childStyle2}>Sign out</MenuItem>
  </MenuGroup>
</MenuList>