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

MenuPrimitive

Deprecated in v4.10.0

An internal utility component that provides show/hide functionality.

Deprecation notice

The MenuPrimitive component is deprecated and will be removed in a future major release. It has been replaced internally with the PopoverPrimitive.

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.

4.10.0

In this version we replaced all MenuPrimitive instances with PopoverPrimitive. For this reason we now consider the MenuPrimitive deprecated and we plan to removed in a future major release.

How to migrate

Consider migrating the existing MenuPrimitive instances to PopoverPrimitive.

Related

On this page: