Styles and Appearance in Blazor Sidebar Component

27 Oct 20212 minutes to read

The following content provides the exact CSS structure that can be used to modify the component’s appearance based on the user’s preference.

Customizing the sidebar

Use the below CSS to customize the sidebar root element.

.e-sidebar {
    background: #898b2b
}

Customizing the sidebar based on the positions

Use the below CSS to customize the left positioned sidebar.

.e-sidebar.e-left {
    border-right: 2px solid red;
}

Use the below CSS to customize the right positioned sidebar.

.e-sidebar.e-right {
    border-left: 2px solid red;
}

Customizing the sidebar based on the active state

Use the below CSS to customize the open state of the left positioned sidebar.

.e-sidebar.e-left.e-open {
    transition: transform 2.5s ease;
}

Use the below CSS to customize the open state of the right positioned sidebar.

.e-sidebar.e-right.e-open {
     transition: transform 2.5s ease;
}

Use the below CSS to customize the closed state of the left positioned sidebar.

.e-sidebar.e-left.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Use the below CSS to customize the closed state of the right positioned sidebar.

.e-sidebar.e-right.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Customizing the sidebar with dock state

When the Dock support is enabled, the “e-dock” class will be added to the root element. Based on that class, all the above stated customization can also be done. Use the following CSS to customize the sidebar element with a dock state.

.e-sidebar.e-dock {
    background: #2d323e;
}

Customizing the different types of sidebar

Use the below CSS to customize the auto type sidebar.

.e-sidebar.e-left.e-auto {
    background-color: pink;
}

Use the below CSS to customize the push type sidebar.

.e-sidebar.e-left.e-push {
    background-color: beige;
}

Use the below CSS to customize the over type sidebar.

.e-sidebar.e-left.e-over {
    background-color: aqua;
}

Use the below CSS to customize the slide type sidebar.

.e-sidebar.e-left.e-slide {
    background-color: green;
}

Customizing the backdrop of the sidebar

Use the below CSS to customize the backdrop of the sidebar.

.e-sidebar-overlay {
    background-color: aqua;
}

Customizing the sidebar in the RTL direction

When the RTL (right to left direction) support is enabled, the “e-rtl” class will be added to the root element. Based on that class, all the above stated customization can also be done. Use the following CSS to customize the sidebar element in the RTL (right to left direction) mode.

.e-sidebar.e-left.e-rtl {
    background-color: antiquewhite;
}