topic Re: Overflow menu on calcite-menu in calcite-navigation in Calcite Design System Questions

Overflow menu on calcite-menu in calcite-navigation

ForrestLin — Tue, 16 Apr 2024 13:47:26 GMT

Hi,

Is it possible to add overflow menu on calcite-menu in calcite-navigation?

I like the overflow menu on Action Bar (calcite-action-bar) and I'm wondering if Calcite Component can add similar overflow menu on calcite-menu in calcite-navigation?

Thanks

Forrest

Re: Overflow menu on calcite-menu in calcite-navigation

KittyHurley — Tue, 16 Apr 2024 18:39:43 GMT

Hi @ForrestLin, you could slot in a Dropdown into the Navigation's "content-end" slot, similar to this example: https://codepen.io/geospatialem/pen/VwNGBae.

Re: Overflow menu on calcite-menu in calcite-navigation

ForrestLin — Tue, 16 Apr 2024 20:18:56 GMT

Hi @KittyHurley

This is what I'm looking for. Is it possible to put the dropdown on the top?

MapView is a good example:

Thanks.

Forrest

Re: Overflow menu on calcite-menu in calcite-navigation

KittyHurley — Tue, 16 Apr 2024 19:59:39 GMT

@ForrestLin wrote:
Hi,
Is it possible to add overflow menu on calcite-menu in calcite-navigation?
I like the overflow menu on Action Bar (calcite-action-bar) and I'm wondering if Calcite Component can add similar overflow menu on calcite-menu in calcite-navigation?
Thanks
Forrest

There may be some panel conflicts with the code. Updated the Codepen to reflect one Action Menu with the slotted Dropdown: https://codepen.io/geospatialem/pen/VwNGBae

Re: Overflow menu on calcite-menu in calcite-navigation

ForrestLin — Tue, 16 Apr 2024 21:51:24 GMT

I fixed the issue by setting z-index.

app.component.html

<calcite-shell>

<app-header slot="header" />

<app-panel-start slot="panel-start" />

<app-panel-end slot="panel-end" />

<app-panel-bottom slot="panel-bottom" />

</calcite-shell>

app.component.scss

app-header {

position: relative;

z-index: 2;

}

app-panel-end {

position: relative;

z-index: 1;

}

header.component.scss

@media(max-width:520px) {

calcite-dropdown{

display: block;

}

calcite-menu{

display:none;

}

@media(min-width:520px) {

calcite-dropdown {

display: none;

}

calcite-menu {

display:block;

}

Re: Overflow menu on calcite-menu in calcite-navigation

KittyHurley — Tue, 16 Apr 2024 21:58:45 GMT

Great to hear! We have additional z-indexes available on the new token reference page: https://developers.arcgis.com/calcite-design-system/foundations/tokens/reference/#stacking if you'd like to leverage some of our existing values, for instance:

calcite-dropdown { z-index: var(--calcite-z-index-dropdown); }

Re: Overflow menu on calcite-menu in calcite-navigation

ForrestLin — Tue, 16 Apr 2024 22:11:07 GMT

@KittyHurley

I'll try it tomorrow.

Thank you for your help!

Forrest