[Feature Request]: Top navigation similar to aws console

[hopkinsnji]

Description

For this component: https://cloudscape.design/components/top-navigation
It would be nice if it resembles the aws console top nav as it is more compact and creates more space for content.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[Al-Dani]

Hello,
Thank you for your suggestion!

Could you share more context with us? What is your use-case and what are the limitations that TopNavigation has for you?

Best,
Aleksandra

[mdai-vss]

Description

For this component: https://cloudscape.design/components/top-navigation It would be nice if it resembles the aws console top nav as it is more compact and creates more space for content.
...

Hello @hopkinsnji , when comparing AWS console with Cloudscape UI on regular FHD display, Navbar height is typically 40px vs 56px (as in 40 + 16, unless it's narrow viewport). One can argue which size would be ideal for a Navbar, but if you want to get close to what AWS console looks, suppose you already have an outer div with id "top-nav", you can try the following.

#top-nav [class^='awsui_top-navigation'] > [class^='awsui_padding-box'] {
  block-size: 40px;
}

#top-nav [class^='awsui_identity'] {
  [class^='awsui_logo'] {
    max-height: 24px;
  }
  [class^='awsui_title'] {
    font-size: medium;
  }
}

Now, I know it's definitely not the recommended way but just might solve your problem in a dev env.

[FlorianSW]

Just sliding into this issue, as I was going to open a new one and found that this sounds similar. Please excuse, if this should be a separate issue, if so, feel free to give me a comment and I move the discussion to a new issue :)

CloudScapes top navigation is different from the height, yes. However, the biggest difference and feature request I would have is the "richness" of available options for the top navigation utilities. Currently, CloudScape does only support menu items in a dropdown that are supported by the button dropdown, as documented.

In contrast, the AWS Consoles visual refresh contains much more different items, e.g.:

• Key-value text boxes (which can be constructed outside of the top navigation utilities with the <Box> element. An example is the Account ID and Federated user items in the image I attached
• a divider, which can be used to differentiate different areas of available actions/information in the dropdown (e.g. in the example image between the Federated User and Account link)
• A list of links, which behave and look differently from the option item in the Button dropdown: They look like a link and when hovered, there is no border, but instead the link turns blue (didn't check which color variable that would be, but I think you get the idea). Example in the image: The Account link and, for the hover example, the Organization link
• Fully fledged buttons, instead of "just" items in the button dropdown, as seen in the Switch role and Sign out buttons in the example image

(sorry for these big black boxes, but I had to redact some info :))

I was also looking for such a feature before the use of Cloudscape in the AWS Console. There is the region switcher, which currently looks something like this:

When building something similar with Cloudscape today, we're limited to the button dropdown utilities, which would look something like this (much different content ofc):

It works, and is okay as it is, however, the Region switcher looks a bit more appealing in my eyes, probably the biggest difference is the padding in the dropdown container and the use of links instead of items which have a border when hovered over.