The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

MenuPrimitive

An internal utility component that provides show/hide functionality.

This component is intended only for internal Helios use. If you need to use it, please contact the Design Systems Team.

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" {{on "click" t.onClickToggle}}>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

<:toggle> named block
A named block that works as "toggle" for the MenuPrimitive.
[T].onClickToggle function
A function to be called by the interactive element to toggle visibility of the content.
[T].isOpen boolean
Hook into this tracked property to access the state of isOpen.
<:content> named block
A named block for the content that is shown/hidden upon toggling.
[C].close function
A function to programmatically close the MenuPrimitive.
onClose function
A callback function invoked when the MenuPrimitive is closed (if provided).
…attributes
This component supports use of ...attributes.

Related

On this page: