SubComponents

Trigger

The trigger is the element that will control the render of the Menu. The trigger API does NOT extend the native div element props, so be careful with that.

Trigger API

Props	Type	Required
children	ReactNode	✅

SubTrigger

The subtrigger is the element that will control the render of the Menu.Sub. The trigger API does NOT extend the native div element props, so be careful with that.

children

The children is required to pass the component or structure that controls the menu state.

Sub

This subcomponent extends the native div props. This would render a SubMenu that must be inside a Menu.

Props	Type	Required
children	ReactNode	✅

CustomArea

An space to render custom elements in the menu.

CustomArea API

This subcomponent extends the native div props.

Props	Type	Required
children	ReactNode	✅

Divider

The divider subcomponent renders a visual element that represents a division. This component also extends the native div props.

Search

The Search subcomponent extends the SDS search component. See for reference: Search.

Option

The Option Subcomponent receives a children that renders content that when clicked, closes the Menu automatically.

Option API

This subcomponent extends the native <div> API. That's why the className prop is not included in the table.

Props	Type	Required
children	ReactNode	❌
layout	'horizontal' | 'vertical';	❌
isDisabled	boolean	❌
isSelected	boolean	❌
isHidden	boolean	❌
onClick	(e: MouseEvent) => void;	❌

children

The element displayed, can be a string or an HTML structure.

layout and isDisabled

Controls the option layout direction. isDisabled controls wether the Option should be disabled or not.

isSelected and isHidden

Creates a visual indicator on each option to determined wether they are selected or hidden.

onClick

A function that is called when the individual option is called.

Header

The header subcomponent is used to render a title. This subcomponent should always be the parent of the Actions subcomponent, in order to mantain the composition pattern always working.

Props	Type	Required
children	ReactNode	❌

children

The title is the string passed, and the is the Actions subcomponent passed as children. A small example can be seen below.

<Menu.Header>
{/* this becomes the title */}
    I am a header
{/* This is always passed as children of the Menu.Header. */}
    <Menu.Actions>
        <Button iconOnly='plus'></Button>
    </Menu.Actions>
</Menu.Header>

Actions

The actions subcomponent is and should always be wrapped by a Menu.Header. This subcomponent also extends the native div API. You should know that all SDS Buttons that are passed as children to the Actions subcomponents, the type will be converted to small buttons.