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

Question

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

ForrestLin · Answer

@Mac_And_Cheese

Thank you so much!

Mac_And_Cheese · Answer

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!