Skip to main content
Since Shoelace 2.0 Code stable Pattern stable Figma ready

Menu Label

<sl-menu-label> | SlMenuLabel

Menu labels are used to describe a group of menu items.

Examples

Basic Menu Label

Fruits Apple Banana Orange Vegetables Broccoli Carrot Zucchini
<sl-menu style="max-width: 200px;">
  <sl-menu-label>Fruits</sl-menu-label>
  <sl-menu-item value="apple">Apple</sl-menu-item>
  <sl-menu-item value="banana">Banana</sl-menu-item>
  <sl-menu-item value="orange">Orange</sl-menu-item>
  <sl-divider></sl-divider>
  <sl-menu-label>Vegetables</sl-menu-label>
  <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
  <sl-menu-item value="carrot">Carrot</sl-menu-item>
  <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
</sl-menu>
sl-menu style="max-width: 200px;"
  sl-menu-label Fruits
  sl-menu-item value="apple" Apple
  sl-menu-item value="banana" Banana
  sl-menu-item value="orange" Orange
  sl-divider
  sl-menu-label Vegetables
  sl-menu-item value="broccoli" Broccoli
  sl-menu-item value="carrot" Carrot
  sl-menu-item value="zucchini" Zucchini
import SlDivider from '@teamshares/shoelace/dist/react/divider';
import SlMenu from '@teamshares/shoelace/dist/react/menu';
import SlMenuLabel from '@teamshares/shoelace/dist/react/menu-label';
import SlMenuItem from '@teamshares/shoelace/dist/react/menu-item';

const App = () => (
  <SlMenu style={{ maxWidth: '200px' }}>
    <SlMenuLabel>Fruits</SlMenuLabel>
    <SlMenuItem value="apple">Apple</SlMenuItem>
    <SlMenuItem value="banana">Banana</SlMenuItem>
    <SlMenuItem value="orange">Orange</SlMenuItem>
    <SlDivider />
    <SlMenuLabel>Vegetables</SlMenuLabel>
    <SlMenuItem value="broccoli">Broccoli</SlMenuItem>
    <SlMenuItem value="carrot">Carrot</SlMenuItem>
    <SlMenuItem value="zucchini">Zucchini</SlMenuItem>
  </SlMenu>
);

Usage

Slots

Name Details
(default) The menu label’s content.

Learn more about using slots.

CSS Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.