We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Appbar across screen

I am using the Appbar component and the Sidebar component. I want the Appbar to appear at the top, across the screen and the Sidebar below that. However, my Sidebar pushes the Appbar to the right and takes its space from the left side of the screen. Here is the code I am using.


                <div class="control-container" style="width:100%">

            <sfappbar colormode="AppBarColor.Primary">

                <sfbutton cssclass="e-inherit" iconcss="e-icons e-menu"></sfbutton>

                <span class="regular">NDMA</span>


                <sfbutton cssclass="e-inherit" content="Login"></sfbutton>



        <sfsidebar htmlattributes="@HtmlAttribute" target=".main-content" width="220px" docksize="50px" enabledock="true" @bind-isopen="SidebarToggle" type="@SidebarType.Auto">


                <div class="main-menu">


                        <div style="text-align: center;" class="text-content"> Sidebar </div>

                        @*<sfmenu cssclass="dock-menu" items="@MainMenuItems" orientation="@VerOrientation"></sfmenu>*@





        <article class="content px-4">




I want to have the Appbar at the top across the screen like this and the sidebar below:







Instead, my Appbar comes out like this:

---------Sidebar------ ---------------Appbar-----------




1 Reply

VR Vijay Ravi Syncfusion Team February 20, 2023 02:23 PM UTC

Hi Amjad,

In your shared sample code you used the main-content as your sidebar target. You can achieve your requirement with the help of adding a div element with a class name of main-content class as shown in the below code snippet.



    <div class="control-container" style="width:100%">

        <SfAppBar ColorMode="AppBarColor.Primary">

            <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>

            <span class="regular">Blazor AppBar</span>


            <SfButton CssClass="e-inherit" Content="Login"></SfButton>



    <div class="main-content" style="height:350px"></div>



<SfSidebar Width="260px" Target="@Target" Position="@Position" HtmlAttributes="@HtmlAttribute" @bind-IsOpen="SidebarToggle">


        <div style="text-align: center;" class="text-content">Sidebar</div>

        @*<sfmenu cssclass="dock-menu" items="@MainMenuItems" orientation="@VerOrientation"></sfmenu>*@




Vijay Ravi

Attachment: appBar_component_with_sideBar_component_209ecb9.zip

Live Chat Icon For mobile
Up arrow icon