nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Menu-item auto-close

LefterisKoumis

After you click the calcite-menu/submenu item, provided there is no other submenu-item, the only way to close it, is to click anywhere else other than on the menu? Is it an industry standard after you click on a menu item to close itself?

@KittyHurley

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

LefterisKoumis

Great. Thank you. Nice way to address the issue, temporarily, correct? So, there is no way through the use of css to adjust the spacing between the menu items? I have 12 items and it occupies 70% of the screen! Ridiculous.

DitwanDPrice

@LefterisKoumis

Here's a temporary workaround you can use. In the CodePen example, the workaround is applied only to the leaf menu items under 'West.'

To implement this, you'll need the JavaScript code and to add the (data-menu-item="close-on-select") attribute to the menu items you want to trigger the auto-close behavior.

DitwanDPrice

Definitely, here you go! https://github.com/Esri/calcite-design-system/issues/10153

LefterisKoumis

Thank you.

Can you please provide me the link for this issue, so I can follow the discussion. Thank you. https://github.com/Esri/calcite-design-system/issues

DitwanDPrice

Thank you, You are indeed correct that the menu not closing is an unintended behavior, and I'll be logging an issue to ensure it's addressed in a future release.

Regarding the spacing between menu items, this is not currently customizable, and there are no immediate plans to introduce this functionality. However, I will bring this up with the team for further discussion to see if we can consider it for a future update.

LefterisKoumis

Sure. ESRI's own example. I forked it.

https://codepen.io/lkoumis1/pen/zYVjpKN?editors=1000

Just click for example, the East and then SouthEast. You expect that after you click the SouthEast you will close the menu, instead it will stay open. Also, is there a way to reduce the spacing between the items. See my screenshot, it take a lot of space. What is the css for this. Thank you.

DitwanDPrice

Hey, do you happen to have a codepen or something that shows the behavior that you're describing?

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.