ui5-webcomponents
ui5-webcomponents copied to clipboard
SAP
SideNavigationItem Font Weight Issue in Horizon Theme
Bug Description
SideNavigationItem which does not have SideNavigationSubItem - still coming as "bold" in Horizon theme. For not-so-important items which should not be highlighted... they are part of fixed items.
Affected Component
SideNavigationItem
Expected Behaviour
We want the control to manually set "not bold" for some SideNavigationItem based on requirement.
Isolated Example
No response
Steps to Reproduce
...
Log Output, Stack Trace or Screenshots
Priority
Medium
UI5 Web Components Version
1.22.0
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
CBC
Declaration
- [X] I’m not disclosing any internal or sensitive information.
Hello @SAP/ui5-webcomponents-topic-rd,
The current implementation is by design, but CBC colleagues have a use case for the side navigation items under the divider to not be bold. The component can provide a CSS Shadow Part, which will allow the needed flexibility.
Best regards, Petya
Hello @surjadeep I spoke with the design team and they have the following feedback:
The bold font-weight of the side navigation is intended to denote that those are first level navigation items. There is no distinction of more and less important items in the navigation and they are all treated equally.
The fold/divider/bottom area was historically reserved for links to settings, legal info, about etc. With the UXC we moved that content in the User Menu and we are no longer recommending the usage of the bottom area. Still that can be used to place "less" significant navigation options.
That being said we have no plans of updating the design, and the guidance to allow non-bold parent navigation items.
What is the reason for your design to deviate from the default design of the SideNavigation?
Hello @gmkv,
Sorry! for the late in reply. In our use-case we are clustering the menus in the category/sub-category model. Hence, we are more focusing on individual entities and that's why we want these to be bold, not the top layer of it. Hope this helps.
Hi @surjadeep,
This issue is fixed since version 1.21: https://sap.github.io/ui5-webcomponents/playground/?path=/story/fiori-side-navigation--tool-layout
Best, Teo
Hello @TeodorTaushanov,
As discussed, please check the issue and let me know.
Regards, Surjadeep
Hi @surjadeep,
With the next version (1.24) of ui5 web components, you will be able to re-style the items like:
<ui5-side-navigation-item style="font-size: 15rem; font-weight: normal; " ...
Best, Teo