MenuSeparator

A non-interactive separator between groups of menu items.

Usage

Use inside MenuList.

Svelte

<MenuList>
  <MenuSeparator {...props} />
</MenuList>

Anatomy

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

Svelte

<div class="whole" {...rest} role="separator" aria-orientation={ariaOrientation}></div>

When embedded in MenuList, variant defaults to the menu's and styling falls back to it. ariaOrientation is ARIA-only: by default a vertical menu renders a horizontal separator, and a horizontal menu renders a vertical separator.

Props

Name	Type	Default	Description
`ariaOrientation`	`<enum>`	-	ARIA-only orientation; by default inferred opposite to the containing `MenuList` orientation
`attach`	`Attachment`	-	Svelte attachment on the root separator
`element`	`HTMLDivElement`	-	Bindable root element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Separator variant

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-separator

Behavior

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Separator (whole <div>): role="separator" and aria-orientation.

aria-orientation defaults from the enclosing MenuList orientation, or from the ariaOrientation prop when supplied.

Exports

Types

TypeScript

interface MenuSeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-orientation"> {
  ariaOrientation?: "horizontal" | "vertical"; // inferred from MenuList orientation when absent
  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-orientation are component-owned
}
type MenuSeparatorReqdProps = never;
type MenuSeparatorBindProps = "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 { MenuItem, MenuList, MenuSeparator } 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: "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 variantStyle3 = {
    neutral: "border-gray-200 dark:border-gray-800",
    active: "border-teal-200 dark:border-teal-900",
    inactive: "border-red-200 dark:border-red-900",
    blue: "border-blue-200 dark:border-blue-900",
    yellow: "border-yellow-200 dark:border-yellow-900",
    sky: "border-sky-200 dark:border-sky-900",
  };
  const childStyle1 = {
    whole: {
      base: "flex min-w-44 flex-col gap-1 rounded-md border bg-white p-1 shadow-lg dark:bg-black",
      ...variantStyle1,
    },
  };
  const childStyle2 = {
    whole: {
      base: "rounded-sm px-2 py-1 text-left text-sm focus:outline-hidden",
      ...variantStyle2,
    },
  };
  const styling = {
    whole: {
      base: "my-1 border-t",
      ...variantStyle3,
    },
  };
</script>

<MenuList {variant} styling={childStyle1}>
  <MenuItem styling={childStyle2}>New file</MenuItem>
  <MenuItem styling={childStyle2}>Duplicate</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Archive</MenuItem>
  <MenuSeparator {styling} />
  <MenuItem styling={childStyle2}>Delete</MenuItem>
</MenuList>