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 |
menu-trigger |
|
Element that opens the menu |
menu-items |
|
|
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 ( |
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 |
|
|
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 ( |
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
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