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

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.