NoRedInk / noredink-ui / Nri.Ui.Menu.V4

Patch changes:

Changes from V3:

A togglable menu view and related buttons.

https://zpl.io/a75OrE2

Menu rendering

view : ({ isOpen : Basics.Bool, focus : Maybe String } -> msg) -> List (Attribute msg) -> List (Entry msg) -> Html.Styled.Html msg

Menu/pulldown configuration:


type Attribute msg

Menu state

isOpen : Basics.Bool -> Attribute msg

Whether the menu is open

isDisabled : Basics.Bool -> Attribute msg

Whether the menu can be opened

opensOnHover : Basics.Bool -> Attribute msg

Whether the menu will be opened/closed by mouseEnter and mouseLeave interaction. Defaults to False.

Triggering button options

defaultTrigger : String -> List (Nri.Ui.Button.V10.Attribute msg) -> Attribute msg

Use Button with default styles as the triggering element for the Menu.

button : String -> List (Nri.Ui.Button.V10.Attribute msg) -> Attribute msg

Use Button as the triggering element for the Menu.

clickableText : String -> List (Nri.Ui.ClickableText.V4.Attribute msg) -> Attribute msg

Use ClickableText as the triggering element for the Menu.

clickableSvg : String -> Nri.Ui.Svg.V1.Svg -> List (Nri.Ui.ClickableSvg.V2.Attribute msg) -> Attribute msg

Use ClickableSvg as the triggering element for the Menu.

clickableSvgWithoutIndicator : String -> Nri.Ui.Svg.V1.Svg -> List (Nri.Ui.ClickableSvg.V2.Attribute msg) -> Attribute msg

Use ClickableSvg as the triggering element for the Menu without a dropdown indicator

withTooltip : List (Nri.Ui.Tooltip.V3.Attribute msg) -> Attribute msg

Warning: Tooltip keyboard events are not fully supported!

buttonId : String -> Attribute msg

A unique string identifier for the button that opens/closes the menu

Menu attributes

navMenuList : Attribute msg

Makes the menu follow the Navigation Menu pattern.

disclosure : { lastId : String } -> Attribute msg

Makes the menu behave as a disclosure.

For more information, please read Disclosure (Show/Hide) pattern.

You will need to pass in the last focusable element in the disclosed content in order for:

dialog : { firstId : String, lastId : String } -> Attribute msg

Makes the menu behave as a dialog.

For more information, please read Dialog pattern.

You will need to pass in the first and last focusable element in the dialog content in order for:

menuWidth : Basics.Int -> Attribute msg

Fix the width of the popover |

menuId : String -> Attribute msg

A unique string identifier for the menu

menuZIndex : Basics.Int -> Attribute msg

The CSS z-index used to render the menu. Defaults to 1.

alignLeft : Attribute msg

Align the menu popover on the left side of the triggering button.

alignRight : Attribute msg

Align the menu popover on the right side of the triggering button.

Right (this property) is the default behavior.

containerCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the menu.

menuCss : List Css.Style -> Attribute msg

Adds CSS to the content of the menu. This will style the menu itself.

groupContainerCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the group. This will style items created via Menu.group

entryContainerCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the entry. This will style items created via Menu.entry

groupTitleCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the group title. This will style the title of items created via Menu.group

groupCaptionCss : List Css.Style -> Attribute msg

Adds CSS to the element containing the group caption. This will style the caption of items created via Menu.captionedGroup

Menu content


type Entry msg

Represents zero or more entries within the menu content

group : String -> List (Entry msg) -> Entry msg

Represents a group of entries with a named legend.

captionedGroup : String -> String -> List (Entry msg) -> Entry msg

Represents a group of entries with a named legend and text caption.

entry : String -> (List (Html.Styled.Attribute msg) -> Html.Styled.Html msg) -> Entry msg

Represents a single focusable entry.

Pass in the id you'd like for your menu item, which will be used to manage the focus.

Menu.entry "my-button-id"
    (\attributes -> Button.button "One great button" [ Button.custom attributes ])