Header Design

Hi, can any one help me achieve this header design? the RadzenSidebartoggle and header title are on the left and the logout is on the right? All should be center aligned vertically.

Thanks and Regards,

Hi @spiderwaui,

You can use RadzenStack to build such layout in RadzenHeader:

    <RadzenHeader>
        <RadzenStack AlignItems="AlignItems.Center" Orientation="Radzen.Orientation.Horizontal" JustifyContent="Radzen.JustifyContent.SpaceBetween">
            <RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" JustifyContent="Radzen.JustifyContent.Left" Gap="0">
                <RadzenSidebarToggle Style="margin-right: 0px"></RadzenSidebarToggle>
                <RadzenLabel Text="Header" />
            </RadzenStack>
            <RadzenButton Icon="logout" Variant="Radzen.Variant.Text" ButtonStyle="Radzen.ButtonStyle.Base"></RadzenButton>
        </RadzenStack>
    </RadzenHeader>
1 Like

Thanks. Highly appreciate it. :slightly_smiling_face: