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 for navigation is required.

baohuachu2

The menu components may contains grouped folded sub menu items which long menu bar can be avoided. Furthermore it is easy to locate the menu we want.

The screenshot1 below is use action bar for navigation,it is too long and not folded.

The second one is with sub menues.

Trouver plus de publications taguées avec

Implemented

Status: Implemented

Réponses

KittyHurley

@baohuachu2 Apologies for the delay, but this has been implemented as of 1.4.0 (May 2023), with samples and configuration options available on the Navigation and Menu component pages.

KittyHurley

Thanks for the background, @baohuachu2!

The component sample you provided has a similar approach to the standalone Navigation component under development. So will be changing the status of this idea to "In Product Plan".

baohuachu2

Hi @KittyHurley @BenElan ,

It is as this Nav Bar . The "BootStrap Navbar" website seems has problem in my side. Today I checked the arcgis online map viewer's code find the

<calcite-action-menu> component which is not included in the document. It is similar to that of Nav bar and I will use it. That it is the same as BenElan's codepen example.

BenElan

For the second screenshot, it is possible just not fully supported at the moment. Here is a codepen:

https://codepen.io/benesri/pen/GRxxNPb

KittyHurley

Hi @baohuachu2, thanks for submitting an idea!

We're in the process of creating a standalone Navigation component similar to your first screenshot, that could be used independent of other components and with top navigation in mind. The component's intent would be similar to other design systems such as the Bootstrap's Navbar. Is that along the lines of what you're seeking?

We don't currently have plans for navigation options within the Action Bar component, but wanted to clarify the ask of the idea to be sure.

Rejoindre la conversation

Connectez-vous pour publier, suivre le contenu, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.