Menu Bar Button
Menu Bar Button is component to be used within Menu Bar to create buttons.
| || ||Indicates the id of a related component’s visually focused element.|| || |
| || ||Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.|| || |
| || ||Indicates the id of a component that describes the button.|| || |
| || ||Aria description the button|| || |
| || ||Details of the component|| || |
| || ||If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.|| || |
| || ||Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.|| || |
| || ||String of id's that indicate alternative labels elements|| || |
| || ||Indicates the id of a component owned by the button.|| || |
| || ||Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.|| || |
| || ||Tells screen reader the element is pressed.|| || |
| || ||Icon|| || |
| || ||Theme.|| || |
setFocus(options?: FocusOptions) => Promise<void> #
Sets focus on underlying button element.
This section includes guidelines for designers and developers about the usage of this component in different contexts.
When to use #
- When you are using Menu Bar and want to fill its slot with a buttons.
When not to use #
- If you are not using Menu Bar.
This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.
- Underlying component has
menurole which marks the component as a menu for screen readers.
- It can be navigated with arrow keys.
Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:
Using CLI ToolsTutorials
Creating Custom PatternsTutorials
Server Side RenderingTutorials
Usage With Markdown
If you experience any issues while using a component, please head over to the Support page for more guidelines and help.