MenuPrimitive

An internal utility component that provides show/hide functionality.

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.

[:toggle].onClickToggle event handler

A function to be called by the interactive element to toggle visibility of the content.

[:toggle].isOpen tracked property

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.

[:content].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.

On this page: