Select to view content in your preferred language

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

213
2
05-05-2025 07:34 AM
ForrestLin
Frequent Contributor

Hello, 

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

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

ForrestLin_0-1746454648414.png

ForrestLin_2-1746455180879.png

ForrestLin_3-1746455319860.png

How to create it using Calcite Components?

Thanks.

Forrest

 

 

0 Kudos
2 Replies
Mac_And_Cheese
Occasional Contributor

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!

0 Kudos
ForrestLin
Frequent Contributor

@Mac_And_Cheese 

Thank you so much!

0 Kudos