Icon sidebar - how to show on hover?

Radzen.Blazor Components
1

Hi,

In the documentation it states: Create a compact icon-only sidebar that expands to show labels on hover or click

How do I show an icon only view by default, which then expands to show the text when Iā€™m hovering over the labels? (instead of clicking on a toggle to expand/collapse the sidebar)

2

Maybe you are looking for this: Blazor PanelMenu | Free UI Components by Radzen

3

No Iā€™d like a sidebar with just icons:

image

When I hover over the icons it will expand:

image
image180Ɨ153 3.28 KB

When I hover off, it will go back to icons

4 
<style>
    .rz-sidebar {
        width: 64px;
        overflow: hidden;
        transition: width var(--rz-transition);
    }

    .rz-sidebar:hover {
        width: 250px;
    }

    /* hide labels and submenus when not hovered */
    .rz-sidebar:not(:hover) .rz-navigation-item-text,
    .rz-sidebar:not(:hover) .rz-navigation-menu {
        display: none;
    }
</style>

<RadzenLayout>
    <RadzenHeader>
        <RadzenLabel Text="Header" />
    </RadzenHeader>
    <RadzenSidebar Responsive="false">
        <RadzenPanelMenu ShowArrow="false">
            <RadzenPanelMenuItem Text="Overview" Icon="home" Path="/" />
            <RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" Path="dashboard" />
            <RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
                <RadzenPanelMenuItem Text="Themes" Icon="color_lens" Path="themes" />
                <RadzenPanelMenuItem Text="Colors" Icon="invert_colors" Path="colors" />
            </RadzenPanelMenuItem>
            <RadzenPanelMenuItem Text="Settings" Icon="settings" Path="settings" />
        </RadzenPanelMenu>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Hover the sidebar to expand it.
        </div>
    </RadzenBody>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

1 Like
5

works, thanks again !