topic Re: How to create a "header menus" using Calcite Components? in Calcite Design System Questions

How to create a "header menus" using Calcite Components?

ForrestLin — Mon, 05 May 2025 14:34:07 GMT

Hello,

I'm trying to create a "header menus" like this:

https://jsapi.maps.arcgis.com/apps/mapviewer/index.html?webmap=9a1f758f02c24ee1928ac71d97a9d406

How to create it using Calcite Components?

Thanks.

Forrest

Re: How to create a "header menus" using Calcite Components?

Mac_And_Cheese — Mon, 05 May 2025 15:05:42 GMT

One option here could be to use the Navigation component's `navigation-action` property, coupled with the `calciteNavigationActionSelect` event - to launch an associated Sheet.

The invoked Sheet can contain a Panel, Flow, or Menu components as needed - here is an example:
Navigation Action + Sheet in Codepen

Alternatively, you could use any element to invoke the Sheet (or, even use a Shell Panel or other container for your menu, as desired) - there are a handful of examples available in the Sheet documentation. Hope that helps!

Re: How to create a "header menus" using Calcite Components?

ForrestLin — Mon, 05 May 2025 15:55:08 GMT

@Mac_And_Cheese

Thank you so much!