Sidebar with Navmenu (dock version)

[Tomasz S.]

I found https://www.syncfusion.com/forums/160503/sidebar-as-navmenu

but ...

How do I do this with the dock option?

So I can use NavLink and have the icon visible when folded?

Or how to properly make it navigate to the page (in the dock version) and select row on the sidebar which page is open

[Praveen Sellappan]

Hi Tomasz,

Thanks for reaching out. Based on your query, we prepared a sample where the Syncfusion Blazor Sidebar is used as a replacement for the default Blazor sidebar.

In this sample:

• Dock mode is enabled, so only the icons are shown when the sidebar is collapsed.
• Clicking a menu item navigates to the corresponding page.
• The sidebar automatically highlights the item for the page that’s currently open.

We’ve attached the sample for your reference. Please review it and let us know if it addresses your requirement. Kindly review the sample and let us know if it fully meets your expectations or if any further adjustments are needed.

Looking forward to your feedback!

Regards,

Praveen Sellappan

Attachment: syncfusionsidebar_9891352c.zip

[Tomasz S.]

It works. 

But it doesn't use NavLink.

[Praveen Sellappan]

Hi Tomasz,

Thank you for your feedback and confirmation that the previous solution is working!

Based on your request, we’ve updated the sample to now use NavLink in the sidebar, replacing the previous navigation implementation. This should fully align with your preferred approach.

Code snippet:

  <SfSidebar @ref="Sidebar">

……

                      <NavLink class="nav-link" rel='nofollow' href="" Match="NavLinkMatch.All">

                      <span class="e-icons e-home"></span>

                      <span class="e-text" title="home">Home</span>

                      </NavLink>

……

                        <NavLink class="nav-link" rel='nofollow' href="counter">

                      <span class="e-icons e-user"></span>

                      <span class="e-text" title="counter">Counter</span>

                      </NavLink>

…….

      </ChildContent>

  </SfSidebar>

Please find the updated sample attached for your review. Kindly review the sample and let us know if this resolves the issue.

If you have any issues, please feel free to contact us.

Regards,

Praveen Sellappan

Attachment: sidebar_5b1a32f9.zip