Blazor Navigation Drawer Overview
The Ignite UI for Blazor Navigation Drawer provides side navigation that can be expanded or collapsed within the content. A mini version provides quick access to navigation even when closed. Its content is completely customizable while also providing default menu item styling.
Blazor Navigation Drawer Example
This sample demonstrates how to create IgbNavDrawer
component.
Usage
Before using the IgbNavDrawer
, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbNavDrawerModule),
typeof(IgbNavDrawerHeaderItemModule)
);
You will also need to link an additional CSS file to apply the styling to the IgbNavDrawer
component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
For a complete introduction to the Ignite UI for Blazor, read the Getting Started topic.
Adding Navigation Drawer Items
The simplest way to start using the IgbNavDrawer
is as follows:
<IgbNavDrawer Open="true">
<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@HomeIcon" slot="icon" IconName="home" Collection="material"></IgbIcon>
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@SearchIcon" slot="icon" IconName="search" Collection="material"></IgbIcon>
<span slot="content">Search</span>
</IgbNavDrawerItem>
</IgbNavDrawer>
If all went well, you should see the following in your browser:
Navbar Integration
While any content can be provided in the drawer, the IgbNavDrawerItem
is available to apply out-of-the-box styling to the items.
To enhance our component a bit, we can use it in conjunction with the IgbNavbar
. This way we can achieve a more completed look and use the drawer's methods. Let's look at how we can use this in the next example:
<IgbNavbar>
<IgbIcon slot="start" IconName="menu" Collection="material" />
<h2>Home</h2>
</IgbNavbar>
<IgbNavDrawer @ref="NavDrawerRef">
<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
<IgbNavDrawerItem>
<IgbIcon slot="icon" IconName="home" Collection="material" />
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon slot="icon" IconName="search" Collection="material" @onclick="OnMenuIconClick" />
<span slot="content">Search</span>
</IgbNavDrawerItem>
</IgbNavDrawer>
Let's also add some radio buttons to display all position
values. This way whenever one gets selected, we will change the position of the drawer.
<IgbRadioGroup id="radio-group" Alignment="RadioGroupAlignment.Horizontal">
<IgbRadio Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
<IgbRadio Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
<IgbRadio Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
<IgbRadio Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
</IgbRadioGroup>
@code {
public IgbNavDrawer NavDrawerRef { get; set; }
public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args)
{
IgbRadio radio = args.Parent as IgbRadio;
if (this.NavDrawerRef != null)
{
switch (radio.Value)
{
case "Start":
{
this.NavDrawerRef.Position = NavDrawerPosition.Start;
break;
}
case "End":
{
this.NavDrawerRef.Position = NavDrawerPosition.End;
break;
}
case "Top":
{
this.NavDrawerRef.Position = NavDrawerPosition.Top;
break;
}
case "Bottom":
{
this.NavDrawerRef.Position = NavDrawerPosition.Bottom;
break;
}
}
}
}
}
And finally, we need a way to open and close our navigation drawer. There are a couple of ways to achieve this, but for the sake of this example we will do the following:
public void OnMenuIconClick()
{
if (this.NavDrawerRef != null)
{
this.NavDrawerRef.Show();
}
}
If all goes well, your component should now look like this:
Mini Variant
With the mini variant, the Navigation Drawer changes its width instead of closing. It is used to maintain quick navigation, available at all times, leaving just the icons. To achieve that, you only need to set up the mini
slot of the drawer.
<IgbNavDrawer @ref="@NavDrawerRef" Open="true" style="position: relative">
<IgbNavDrawerHeaderItem>
Sample Drawer
</IgbNavDrawerHeaderItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@HomeIcon" slot="icon" Collection="material" IconName="home" />
<span slot="content">Home</span>
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon @ref="@SearchIcon" slot="icon" Collection="material" IconName="search" />
<span slot="content">Search</span>
</IgbNavDrawerItem>
<div slot="mini">
<IgbNavDrawerItem>
<IgbIcon slot="icon" Collection="material" IconName="home" />
</IgbNavDrawerItem>
<IgbNavDrawerItem>
<IgbIcon slot="icon" Collection="material" IconName="search" />
</IgbNavDrawerItem>
</div>
</IgbNavDrawer>
And here's the result:
Styling the Navigation Drawer
The navigation drawer component exposes several CSS parts - base
, main
, and mini
. The navigation drawer item component exposes three CSS parts as well - base
, icon
and content
, giving you full control over their styling.
igc-nav-drawer::part(base) {
background: #2d313a;
}
igc-nav-drawer-item::part(base) {
color: #fff;
}
igc-nav-drawer-item::part(base):hover {
background-color: #3D4149;
}
igc-nav-drawer-item[active]::part(base) {
background: #f3c03e;
color: #2c2c2c
}
igc-nav-drawer-header-item {
color: #f3c03e
}
API References
IgbButton
IgbIcon
IgbNavDrawerHeaderItem
IgbNavDrawerItem
IgbNavDrawer
IgbNavbar
IgbRadioGroup
IgbRadio