Sidebar component - responsive navigation sidebar.
Use your own custom logo in the sidebar header by setting the LogoTemplate
parameter (RenderFragment
) on the HxSidebarBrand
component.
If you'd like to include more than just an icon and text in the HxSidebarItem
, you can do so with the ContentTemplate
parameter.
If you set MultipleItemsExpansion="false"
, upon item expansion, all other items are collapsed. If true
(default), multiple items can be expanded at one time.
Use the bindable Collapsed
parameter to set or track the sidebar state.
With the TogglerTemplate
, you can set a custom toggler for the desktop version to be rendered instead of the default visual.
Render varying content based on the SidebarTogglerTemplateContext.
To achieve responsiveness of the sidebar (such as this documentation site has), you need to adjust the application layout. The main layout might look like this:
@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 |
---|---|---|
Collapsed | bool |
Indicates whether the HxSidebar is collapsed, can be used to alter the state (expand or collapse the sidebar). |
CollapsedChanged | EventCallback<bool> |
Fires when the sidebar is expanded or collapsed. |
CollapseIcon | IconBase |
CollapseIcon is obsolete and will be removed in a future release. Use TogglerTemplate if you want to render an icon. |
CssClass | string |
Additional CSS class. |
ExpandIcon | IconBase |
ExpandIcon is obsolete and will be removed in a future release. Use TogglerTemplate if you want to render an icon. |
FooterTemplate | RenderFragment<SidebarFooterTemplateContext> |
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 . |
MultipleItemsExpansion | bool |
Whether multiple items can be in the expanded state at once.
If set to false , upon item expansion, all other items are collapsed.
The default is true . |
ResponsiveBreakpoint | SidebarResponsiveBreakpoint |
The breakpoint below which the sidebar switches to the mobile version (exclusive). The default is SidebarResponsiveBreakpoint.Medium . |
TogglerTemplate | RenderFragment<SidebarTogglerTemplateContext> |
Vertical toggler (desktop version) to be rendered instead of the default bar/arrow. |
Name | Description | Default |
---|---|---|
--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-max-height | Max height of the sidebar. | 100vh |
--hx-sidebar-toggler-background | Toggler bar/arrow background. | var(--bs-gray-500) |
--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-body-color) |
--hx-sidebar-item-icon-color | Color of the items icons. | var(--bs-primary) |
--hx-sidebar-item-border-radius | Border radius of the items. | var(--bs-border-radius-lg) |
--hx-sidebar-item-hover-color | Color of the items on hover. | var(--bs-primary) |
--hx-sidebar-item-hover-icon-color | Color of the items icon 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. | .1 |
--hx-sidebar-item-active-color | Color of the active item. | var(--bs-primary) |
--hx-sidebar-item-active-icon-color | Color of the active item icon. | var(--bs-primary) |
--hx-sidebar-parent-item-active-icon-color | Icon color of the parent of active item. | var(--hx-sidebar-item-icon-color) |
--hx-sidebar-item-active-background-opacity | Background opacity of the active item. | .1 |
--hx-sidebar-item-active-background-color | Background color of the active item. | var(--bs-primary-rgb) |
--hx-sidebar-item-active-font-weight | Font weight of the active item. | inherit |
--hx-sidebar-parent-item-active-color | Color of the parent of active item. | var(--hx-sidebar-item-color) |
--hx-sidebar-parent-item-active-background-color | Background color of the parent of active item. | unset |
--hx-sidebar-parent-item-active-background-opacity | Background opacity of the parent of active item. | 0 |
--hx-sidebar-parent-item-active-font-weight | Font weight of the parent of active item. | 600 |
--hx-sidebar-item-margin | Margin of the items. | 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-body-nav-gap | Gap of the sidebar body nav element. | .25rem |
--hx-sidebar-footer-padding | Padding of the sidebar footer. | 1rem |
--hx-sidebar-brand-shortname-background-color | Background color of the brand short name. | var(--bs-primary) |
--hx-sidebar-brand-shortname-border-radius | Border radius of the brand short name. | .625rem |
--hx-sidebar-brand-shortname-color | Color of the brand short name. | var(--bs-white) |
--hx-sidebar-brand-shortname-width | Width of the brand short name. | 2.5rem |
--hx-sidebar-brand-shortname-height | Height of the brand short name. | 2.5rem |
--hx-sidebar-brand-shortname-font-weight | Font weight of the brand short name. | 600 |
--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-name-color | Color of the brand name. | var(--bs-body-color) |
--hx-sidebar-brand-name-font-weight | Font weight of the brand name. | 600 |
--hx-sidebar-brand-gap | Gap between the brand logo and the brand name. | .25rem |
--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). |
ContentTemplate | RenderFragment<SidebarItemContentTemplateContext> |
Inner custom content for the HxSidebarItem . |
CssClass | string |
Any additional CSS class to add. |
Enabled | bool |
Allows you to disable the item with false .
Default is true . |
ExpandOnMatch | bool |
Set to false if you don't want to expand the sidebar if URL matches.Default is true .
NOTE: The expansion is only applied on initial load, the sidebar does not track the URL changes (this may change in the future). |
HighlightOnActiveChild | bool |
Set to false if you don't want to highlight the item if one of the children items is active (URL matches).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 . |
OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false . |
OnClickStopPropagation | bool |
Stops onClick-event propagation. Default is false . |
Text | string |
Item text. |
TooltipText | string |
Text content of tooltip displayed while hovering item of collapsed Sidebar. |
Name | Type | Description |
---|---|---|
OnClick | EventCallback<MouseEventArgs> |
Raised after the item is clicked. |
Brand for the HxSidebar.HeaderTemplate
.
Name | Type | Description |
---|---|---|
BrandName | string |
The long name of the brand. |
BrandNameShort | string |
The short name of the brand. |
LogoTemplate | RenderFragment<SidebarBrandLogoTemplateContext> |
The logo of the brand. |