topic Re: Calcite Menu Button in Calcite Design System Questions

Calcite Menu Button

CW-GIS — Mon, 07 Oct 2024 19:13:38 GMT

How to get the hamburger menu only? This menu button (and horizontal header) is exactly what I need. What component is just the menu button? I tried menu and action bar, but those seem to be different.

How it opens to an accordion? or list is perfect.

Re: Calcite Menu Button

KittyHurley — Tue, 08 Oct 2024 16:43:35 GMT

@CW-GIS The above can be achieved using Navigation's "navigation-action" attribute, where an action is added to the component's primary navigation level.

Additional configuration can also be achieved using the "calciteNavigationActionSelect" event, such as a displaying Sheet when interacting with the action. The configuration displayed in Calcite's sample playground uses a Sheet when interacting with the action, and other content can be slotted using some of Shell's slots.

To explore code samples there is a Sheet sample available named as "Sheet launched from Navigation Action", and/or you can explore this example: https://codepen.io/geospatialem/pen/GRLoZXo.

Re: Calcite Menu Button

Mac_And_Cheese — Thu, 10 Oct 2024 15:56:44 GMT

The solution Kitty provided using Navigation and `navigation-action` is a good and valid one - however it is not quite the same set up used in the Component Sample.

The Component Sample layout can be achieved without the Navigation component, just by slotting an Action into the `header-actions-start` slot of a Panel, and then using events to manage the `open` property of a Sheet.

Note that in order to match the provided screenshot - there is an added border on the Action set via css. This is of course optional and can be adjusted as needed or not used.

Slotted Action Invoking Sheet