Different style for SideNavigationItem and SideNavigationSubItem

[giladvidal]

Hi,
I'm trying to set a different style (font etc.) to the item and sub-item.

The sample is for menu:
Admin
Customer (sub item)
Users (sum item)

Setting className in SideNavigation will set the style to all menu items. Setting other className in SideNavigationSubItem does not change anything.

        <SideNavigation>  
            <SideNavigationItem 
                text="Admin" 
                icon="key-user-settings">
                <SideNavigationSubItem
                    text="Customers"
                    onClick={() => {
                        navigate('/customers')
                    }}
                />
                <SideNavigationSubItem
                    text="Users"
                    onClick={() => {
                        navigate('/users')
                    }}
                />
            </SideNavigationItem>
        </SideNavigation>

Thanks,
Gilad

[Lukas742]

Hello @giladvidal

I don't think there is currently an acceptable way to accomplish this, as the styles are nested deep in multiple shadow roots of the web components and therefore you can't change them without internal methods. I think the best approach here would be to open a feature request in the ui5 web components repo and explain there what your use case is, so maybe they could implement a way to customize styles. (E.g. by adding the part attribute for the ::part pseudo element.)