TopNavigation active item

[kilwo]

I may have missed something, but how do you specify an alternate style for the items in the utilities. IE. if the utilities are a list of link objects, but you want to style the link based on the current page.

Or put another way, how would you achieve the same style top navigation as at https://cloudscape.design/

[jperals]

Hi @kilwo,

First of all, the reason why the top navigation of our website looks a bit different from the standard CloudScape Top Navigation component, is because it is currently an ad-hoc implementation that does not use the Top Navigation component 😌. This is just because Top Navigation was created after the first iterations of the site already existed.

Now to your actual main question, which is a good one: how to style elements while at the same time using CloudScape? I would highlight the following:

• For any component that is not a CloudScape component, you are free to style it as usual, e.g, with classes and stylesheets, using your existing build mechanism —but at the same time of course, you should make sure that the overall style keeps being consistent and sensible. For this, our visual foundation guidelines in general and visual tokens in particular might help.
• It is also possible to customize CloudScape to your own branding style. For this, you might want to look at our theming guide.

I hope what I said was not too obvious, and helped shed some light to your question. Please feel free to ask if something is still not clear.