Overflow menu on calcite-menu in calcite-navigation

[ForrestLin]

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

[KittyHurley]

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. 

[ForrestLin]

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

[KittyHurley]

---

@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

[ForrestLin · Accepted solution]

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" />

  <div id="mapViewNode"></div>

</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;

  }

}

[KittyHurley]

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);
}

[ForrestLin]

@KittyHurley 

I'll try it tomorrow.

Thank you for your help!

Forrest