Menu

Menu and Menu Items allow users to access and navigate pages, routes, or functionality within your application and experience.

Overview

Menu provides consistent structure for your application menu. It is most often slotted into Navigation, but it is also appropriate at times to place in other components, such as Shell Panel, Panel, and Flow.

Menu provides context to different portions of a user experience. Within one application, they may be used multiple times to provide different meaning to users.

Usage

  • As the primary method of traversing an application or experience, within a Navigation component.
  • Providing contextual location to a user within a portion of the interface, such as within a Panel.
  • Within a Flow inside a Shell Panel.

Sample

6 samples
1
2
3
4
5
6
7
8
9
10
11
<calcite-shell>
    <calcite-navigation slot="header">
        <calcite-navigation-logo slot="logo" heading="Snow Plow Map" description="City of AcmeCo">
        </calcite-navigation-logo>
        <calcite-menu slot="content-end" label="Snow Plow Map Menu">
            <calcite-menu-item text="Drivers" icon-start="license" text-enabled></calcite-menu-item>
            <calcite-menu-item active text="Routes" icon-start="road-sign" text-enabled></calcite-menu-item>
            <calcite-menu-item text="Forecast" icon-start="snow" text-enabled></calcite-menu-item>
        </calcite-menu>
    </calcite-navigation>
</calcite-shell>
v3.0.0

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.
EnterWhen a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state.
SpaceWhen a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state.
Arrow downWhen a calcite-menu-item is slotted in the component's "submenu-item", opens the sub-menu. When in a slotted submenu-item, navigates to the next calcite-menu-item, unless it is the last item, where focus will remain.
Arrow upWhen a calcite-menu-item is slotted in the component's "submenu-item", opens the sub-menu. When in a slotted submenu-item, navigates to the previous calcite-menu-item, unless it is the first item, where focus will remain.
Arrow leftMoves focus to the next calcite-menu-item, unless it is the last item, where focus will remain. When a calcite-menu-item is slotted in the component's "submenu-item" and the sub-menu is open, focus shifts to the sub-menu's first item.
Arrow rightMoves focus to the previous calcite-menu-item, unless it is the last item, where focus will remain. When a calcite-menu-item is slotted in the component's "submenu-item" and the sub-menu is open, focus shifts to the sub-menu's parent item.
EscWhen a calcite-menu-item is slotted in the component's "submenu-item" and is open, will close the sub-menu and return focus to its parent.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
labelrequiredlabelAccessible name for the component.string
layoutlayoutSpecifies the layout of the component."horizontal" | "vertical""horizontal"
messageOverridesUse this property to override individual strings used by the component.{ more?: string; }

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component's first focusable element.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close