Sidebar component - responsive navigation sidebar.
To achieve responsiveness of the sidebar (such as this documentation site has) you need to adjust application layout. The main layout might look like:
@inherits LayoutComponentBase
<HxMessenger Position="ToastContainerPosition.MiddleCenter" />
<HxMessageBoxHost />
@* Add .container-xxl or similar, if you want to limit page width as this documentation does. *@
<div class="d-md-flex min-vh-100">
<HxSidebar CssClass="sticky-top">
...
</HxSidebar>
<div class="main p-4 flex-grow-1 overflow-hidden">
@Body
</div>
</div>
site.css
.
You don't need any other layout-related CSS in site.css
:
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
Name | Type | Description |
---|---|---|
CollapseIcon | IconBase |
Icon for collapsing the desktop version. |
CssClass | string |
Additional CSS class. |
ExpandIcon | IconBase |
Icon for expanding the desktop version. |
FooterTemplate | RenderFragment |
Sidebar footer (e.g. logged user, language switch, ...). |
HeaderTemplate | RenderFragment |
Sidebar header. |
Id | string |
ID of the root sidebar HTML element. (Autogenerated if not set.) |
ItemsTemplate | RenderFragment |
Sidebar items. Use HxSidebarItem . |
Name | Description | Default |
---|---|---|
--hx-sidebar-item-hover-background-color | Item color on hover. | var(--bs-primary) |
--hx-sidebar-item-hover-background-opacity | Item background opacity on hover. | .05 |
--hx-sidebar-background-color | Background color. | transparent |
--hx-sidebar-collapsed-width | Width of collapsed sidebar. | 72px |
--hx-sidebar-width | Width of the sidebar. | 250px |
--hx-sidebar-toggler-border | Toggler border. | 1px solid var(--bs-gray-200) |
--hx-sidebar-toggler-background | Toggler background. | white |
--hx-sidebar-item-font-size | Font size of the items. | 1rem |
--hx-sidebar-item-padding | Padding of the items. | .75rem |
--hx-sidebar-item-color | Color of the items. | var(--bs-dark) |
--hx-sidebar-item-hover-color | Color of the items on hover. | var(--bs-primary) |
--hx-sidebar-item-hover-background-color | Background color of the items on hover. | var(--bs-primary-rgb) |
--hx-sidebar-item-hover-background-opacity | Background opacity of the items on hover. | .05 |
--hx-sidebar-item-margin | Margin of the items. | 0 0 .25rem 0 |
--hx-sidebar-subitem-font-size | Font size of the subitems. | .875rem |
--hx-sidebar-subitem-padding | Padding of the subitems. | .5rem |
--hx-sidebar-subitem-margin | Margin of the subitems. | 0 0 .25rem 2rem |
--hx-sidebar-header-padding | Padding of the sidebar header. | 1rem |
--hx-sidebar-body-padding | Padding of the sidebar body. | 0 1rem |
--hx-sidebar-footer-padding | Padding of the sidebar footer. | 1rem |
--hx-sidebar-brand-logo-background-color | Background color of the brand logo. | var(--bs-primary) |
--hx-sidebar-brand-logo-border-radius | Border radius of the brand logo. | .625rem |
--hx-sidebar-brand-logo-width | Width of the brand logo. | 2.5rem |
--hx-sidebar-brand-logo-height | Height of the brand logo. | 2.5rem |
--hx-sidebar-brand-logo-color | Color of the brand logo. | white |
--hx-sidebar-brand-name-color | Color of the brand name. | var(--bs-dark) |
--hx-sidebar-brand-name-font-weight | Font weight of the brand name. | 600 |
--hx-sidebar-footer-item-padding | Padding of the items in the footer. | .75rem |
--hx-sidebar-footer-item-margin | Margin of the items in the footer. | 0 |
--hx-sidebar-footer-item-font-size | Font size of the items in the footer. | 1rem |
--hx-sidebar-footer-item-color | Color of the items in the footer. | unset |
--hx-sidebar-footer-item-radius | Radius of the items in the footer. | unset |
--hx-sidebar-footer-item-hover-background-color | Background color on hover of the items in the footer. | unset |
--hx-sidebar-footer-item-hover-background-opacity | Background opacity on hover of the items in the footer. | unset |
--hx-sidebar-footer-item-hover-color | Color on hover of the items in the footer. | unset |
Item for the HxSidebar
.
Name | Type | Description |
---|---|---|
ChildContent | RenderFragment |
Sub-items (not intended to be used for any other purpose). |
CssClass | string |
Any additional CSS class to add. |
Enabled | bool |
Allows you to disable the item with false .
Default is true . |
Href | string |
Item navigation target. |
Icon | IconBase |
Item icon (optional). |
Match | NavLinkMatch? |
URL matching behavior for the underlying NavLink .
Default is NavLinkMatch.Prefix . |
Text | string |
Item text. |
Brand for the HxSidebar.HeaderTemplate
.
Name | Type | Description |
---|---|---|
BrandName | string |
Brand long name. |
BrandNameShort | string |
Brand short name. |
Logo | RenderFragment |
Brand logo. |