4.37.0

Menu

Container for links and other content

Demo

API

Tag

Name Description
<s-menu> Custom Element, accepts 2 slotted elements as content, see slots.

Slots

Name Required Description

Attributes

Name Value Required Description
open Boolean attribute

Add this attribute to open the menu.
disabled Boolean attribute

Add this attribute to a menu item (<button> only) to disable. There is no native support for the disabled attribute on <a> elements.

Properties

Name Value Required Description
open Boolean attribute

Add this attribute to open the menu.

Classes

Name Description
[slot="menu-trigger"].show-expand-indicator Adds down/up triangle to menu trigger button to indicate open/closed state
full-width Styles trigger button to span the full width of its container. Primarily for use in responsive table toolbar.

Demo

API

Tag

Name Description
<SMenu> Accepts 2 slotted elements as content, see slots.

Slots

Name Required Description
menu-trigger

Element that opens the menu
menu-items

<ul> that contains menu items wrapped in <li>. <a> and <button> inherit styling.

Props

Name Value Required Description
open Boolean attribute

Add this attribute to open the menu.
disabled Boolean attribute

Add this attribute to a menu item (<button> only) to disable. There is no native support for the disabled attribute on <a> elements.

Classes

Name Description
[slot="menu-trigger"].show-expand-indicator Adds down/up triangle to menu trigger button to indicate open/closed state
full-width Styles trigger button to span the full width of its container. Primarily for use in responsive table toolbar.

Skylab React links

General information about using our React package

Guidelines

Accessibility

An element with slot="menu-trigger" must have aria-controls="{{menu-items-id}}" to inform assistive technologies that the element opens a menu.

Content

<s-menu> should contain exactly 2 children - one slotted as menu-trigger and one slotted as menu-items. The menu trigger may be any valid HTML element, but most common implementation is <button slot="menu-trigger">. The menu-items element must be structured as <ul slot="menu-items">.

Only <a>, <button>, and <hr> are allowed as menu-items <li> children (<hr> creates a horizontal divider between menu sections; give it role="separator").

Positioning

By default, top left corner of menu-items will be positioned at bottom left corner of menu-trigger. If this default positioning would be out of client viewport, it is automatically adjusted.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com