How to use this component
The MenuPrimitive component renders an interactive element that triggers a custom event handler provided by the :toggle block (passed via hash by Ember). To comply with accessibility best practices, this element is usually a button or a component that renders a button.
When the content is disclosed, the container can be closed in various way; toggling via the button (click or enter/return), clicking outside of the content, or via the esc key.
Note: DisclosurePrimitive, another variant of this primitive, excludes the functionality to close the content panel by either clicking outside of the content, or via the esc key.
<Hds::MenuPrimitive>
<:toggle as |t|>
<button type="button" >Click me</button>
</:toggle>
<:content>
your content here
</:content>
</Hds::MenuPrimitive>
Content positioning
The :content block is not positioned in relation to the :toggle block. We recommend applying position: absolute to a wrapper around the content that is then passed to the :content block.
Component API
- Name
-
<:toggle> - Type
-
named block - Description
- A named block that works as "toggle" for the MenuPrimitive.
- Name
-
[:toggle].onClickToggle - Type
-
event handler - Description
- A function to be called by the interactive element to toggle visibility of the content.
- Name
-
[:toggle].isOpen - Type
-
tracked property - Description
-
Hook into this tracked property to access the state of
isOpen.
- Name
-
<:content> - Type
-
named block - Description
- A named block for the content that is shown/hidden upon toggling.
- Name
-
[:content].close - Type
-
function - Description
- A function to programmatically close the MenuPrimitive.
- Name
-
onClose - Type
-
function - Description
- A callback function invoked when the MenuPrimitive is closed (if provided).
- Name
-
…attributes - Description
-
This component supports use of
...attributes.