Radzen Header Toolbar Item Alignment

Radzen.Blazor Components
1

I am using Radzen Layout Example where It has a Header (Toolbar) and a Sidebar. My question is how I can align Items inside Radzen Header Like One Logo on Left Side, and Search Bar in Center and Logout Button on Extreme Right.

<RadzenHeader class="header-bg">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            @* This Logo should be on Extreme Left *@
            <RadzenImage Path="/logo.png" Style="max-height:37px; width: auto;" />

            @* This menu Position should be Extreme Right *@
            <RadzenMenu Click="OnParentClicked">
                <RadzenMenuItem Text="General" Icon="home">
                    <RadzenMenuItem Text="Buttons" Path="buttons" Icon="account_circle"></RadzenMenuItem>
                    <RadzenMenuItem Text="Menu" Path="menu" Icon="line_weight"></RadzenMenuItem>
                    <RadzenMenuItem Click="OnChildClicked" Text="ChildClick" Icon="attach_file"></RadzenMenuItem>
                    <RadzenMenuItem Text="Dialog" Path="dialog" Icon="perm_media"></RadzenMenuItem>
                    <RadzenMenuItem Text="Notification" Path="notification" Icon="announcement"></RadzenMenuItem>
                </RadzenMenuItem>
            </RadzenMenu>

            @* Only Visible in Mobile (Smaller screens) *@
            <RadzenSidebarToggle Click="@(() => ShowSideBar = !ShowSideBar)" />
        </RadzenStack>
    </RadzenHeader>

How can I achieve positioning of various Items inside RadzenHeader > RadzenStack

2

Hi @mohiyo,

To properly align items inside the RadzenHeader you should use RadzenRow and RadzenColumn layout components as they allow you to control the width and positioning on different screen sizes:

image
image2084×1080 156 KB

See also Breakpoints to understand how responsive breakpoints work.

To show/hide RadzenSidebarToggle, you can use Radzen's utility CSS classes. See this topic - RadzenColumn Hide on XS Device. In your case the classes are rz-display-block rz-display-sm-none

3

Do you have an example how RadzenRow and RadzenColumn must be use in this case?

4

Can you clarify what case you are referring to?