Author : MD TAREQ HASSAN | Updated : 2021/01/15
About Topbar
- If the topbar is simple information i.e. Logo + text, yjen use
<header>tag - If topbar contains menu, the use
<nav>tag - Do not abuse
<nav>tag if it does not contain navigation <nav>tag has semantic and accessibility significance<nav>tag can be nested inside<header>tag if needed
Container class
- use container class inside
<header>or<nav>tag for aligning items class="container-fluid": for full widthclass="container"for half width- Best
- top level div:
<div class="container-fluid"> - nested div:
<div class="container">
- top level div:
Using Bootstrap
Example: MainLayout of a Blazor WebAssembly App (Shared/MainLayout.razor)
Using header because topbar does not contain menu items
@inherits LayoutComponentBase
<div class="container-fluid px-sm-0">
<header class="navbar sticky-top bg-light mt-0 mb-sm-5">
<div class="container px-sm-0">
<div class="col-sm-3"><img src="images/nc_logo.jpg" class="text-left img-thumbnail" /> </div>
<h3 class="col-sm text-left">UI PoC・Blazor</h3>
<div class="col-sm text-sm-right">
<span class="my-sm-auto">hassan@hovermind.com</span>
<span class="my-sm-auto text-white bg-primary rounded-circle ml-sm-1 p-sm-2">HT</span>
</div>
</div>
</header>
<main role="main" class="container px-sm-0">
@Body
</main>
</div>
Using nav because topbar contains menu items
@inherits LayoutComponentBase
<div class="container-fluid px-sm-0">
<nav class="navbar sticky-top bg-light">
<div class="container px-sm-0">
<div class="col-sm-3"><img src="images/logo.jpg" class="text-left img-thumbnail" /> </div>
<!-- Menu items here -->
</div>
</nav>
<main role="main" class="container">
@Body
</main>
</div>
Nav inside header example
Shared/MainLayout.razor in Blazor server
@inherits MainLayoutBase
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-sm-3 sticky-top">
<div class="container">
<img src="image/logo.svg" class="col-sm-3 text-left" />
<h3 class="col-sm text-left">Foo Bar Baz</h3>
@if (!string.IsNullOrWhiteSpace(CurrentLoggedInUser.EmailAddress))
{
<p class="my-sm-auto">@CurrentLoggedInUser.EmailAddress</p>
}
@if (!string.IsNullOrWhiteSpace(CurrentLoggedInUser.Surname) && !string.IsNullOrWhiteSpace(CurrentLoggedInUser.GivenName))
{
<TextAvatar Surname="@CurrentLoggedInUser.Surname" GivenName="@CurrentLoggedInUser.GivenName" />
}
</div>
</nav>
</header>
<div class="container" style="position: relative;">
<div class="toast mt-sm-2 fade hide" role="alert" data-delay="2500" data-animation="true" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0; z-index:1000; min-width: 25%;">
<div class="toast-header bg-success text-white">
<strong class="mr-sm-auto">Success</strong>
<button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-light"></div>
</div>
<main role="main" class="pb-3">
<CascadingValue Value="@CurrentLoggedInUser">
@Body
</CascadingValue>
</main>
</div>