Navbar blocks
A navbar block is the website header: brand, navigation links, and the primary call-to-action. Unlike an app shell header, it is built for marketing sites and landing pages. All blocks rearrange responsively: on narrow screens the brand and actions stay on the first row and the navigation reflows below them.
Simple navbar linkLink to this section
A navbar block with brand, links, and a call-to-action button. Below the md breakpoint the links move to a second row.
Navbar with search linkLink to this section
A navbar block with a search box and account actions, typical for a storefront. On narrow screens the search takes its own full-width row.
Dark navbar linkLink to this section
A navbar block on a dark background with sign-in and trial actions. The links reflow below the brand on narrow screens.
Centered navbar linkLink to this section
A two-row navbar block with the brand centered above the navigation. Links wrap naturally on narrow screens.
Navbar with top bar linkLink to this section
A navbar block with a slim utility strip for contact details above the main navigation.
Transparent navbar linkLink to this section
A navbar block overlaying a hero image with light text.
Double-deck navbar linkLink to this section
A storefront navbar block with brand, search, and account on the first row and categories on the second.
Navbar with auth buttons linkLink to this section
A navbar block with sign-in and sign-up actions.
Navbar with dropdown indicators linkLink to this section
A navbar block whose sections expand into menus, shown with chevron indicators.
Navbar with icon links linkLink to this section
A navbar block with leading icons on each navigation link.
Minimal navbar linkLink to this section
A navbar block reduced to brand, one action, and a menu button.
Navbar with dividers linkLink to this section
A dark navbar block with link groups separated by vertical dividers and utility icons.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT