[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

• [X] I agree to follow this project's Code of Conduct
• [X] 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.