Side bar design i

[pradeep]

Please include a side bar with the same design as the sub menu. I'm having trouble with design, and I'd appreciate it if you could assist me.

https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar

[Gayathri KarunaiAnandam]

Hi Pradeep, 

 

We have checked your query. We have prepared a Sidebar Menu sample with Url property. Please check the below code snippet. 

 

Code: 

 

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="72px"  EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle" Type="@SidebarType.Auto"> 

        <ChildContent> 

            <div class="main-menu"> 

                <div> 

                     

                    <SfMenu TValue="MenuItem" Orientation="@VerOrientation" CssClass="dock-menu" > 

    <MenuItems> 

        <MenuItem Text="Menu" IconCss="e-icons expand" Url=https://www.google.com/> 

        </MenuItem> 

        <MenuItem Text="Home" IconCss="e-icons home" Url=https://www.google.com/search?q=home> 

            <MenuItems> 

                <MenuItem Text="Cut" Url=https://www.google.com/search?q=cut></MenuItem> 

                <MenuItem Text="Copy" Url=https://www.google.com/search?q=copy></MenuItem> 

                <MenuItem Text="Paste" Url=https://www.google.com/search?q=paste></MenuItem> 

            </MenuItems> 

        </MenuItem> 

        <MenuItem Text="Profile" IconCss="e-icons profile" Url=https://www.google.com/search?q=profile> 

            <MenuItems> 

                <MenuItem Text="Toolbars" Url=https://www.google.com/search?q=Toolbar></MenuItem> 

                <MenuItem Text="Zoom" Url=https://www.google.com/search?q=zoom></MenuItem> 

                <MenuItem Text="Full Screen" Url=https://www.google.com/search?q=screen></MenuItem> 

            </MenuItems> 

        </MenuItem> 

         

        <MenuItem Text="Info" IconCss="e-icons info"></MenuItem> 

        <MenuItem Text="Settings" IconCss="e-icons settings"></MenuItem> 

   </MenuItems> 

    <MenuEvents TValue="MenuItem"  ItemSelected="itemSelected"></MenuEvents> 

</SfMenu> 

                </div> 

            </div> 

        </ChildContent> 

    </SfSidebar> 

 

For your convenience, please check the below code snippet. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBAR-1388896675 

 

Output: 

 

 

 

Please check and get back to us, if you need further assistance. 

 

Regards, 

Gayathri K