shadcn.io is not affiliated with official shadcn/ui
Centered Logo Navbar Block for React
A symmetrical navbar with a centred wordmark in its own hairline cell between two link groups and a Bag link, and a sheet menu on phones.
Installation
Overview
A centred-wordmark navbar for React with Base UI, for a fashion house called Maison Odile. The wordmark sits on the centre line in its own cell, whose two hairlines run the bar's height and meet the page's top rule at + marks; Shop and Journal sit at its start, About and Stores and a Bag link at its end. The three columns are 1fr auto 1fr, so the wordmark stays centred whatever the links' widths. On a phone the links fold: a menu button at the start, the wordmark in the middle and Bag at the end, and the button opens a sheet from the top with all four links. It's built from Sheet, Guides and Button, with your theme's tokens for every colour. For fashion, retail and editorial sites that lead with a brand name rather than a call to action.
FAQ
How are the hairlines around the wordmark drawn?
The wordmark's cell carries its own Guides with rules="none" and marks="top": two side lines the full height of the cell and a + mark where each meets the page's top rule. Because the cell is the middle column of the grid and the other two are 1fr, the cell is always centred. Widen the cell with the md:px-10 on it.
Why are there two navigation landmarks?
The wordmark sits between the two groups, so one nav can't wrap both without wrapping the wordmark. The start group is the nav named Main and the end group is a nav named Secondary. On a phone both fold into the one Main nav inside the sheet, with a hairline between the groups.
What does the Bag link do?
It's a link to your bag page (href="#", point it at yours), drawn as a ghost button with an icon and a label; on a phone only the icon shows and the label stays for screen readers. It shows no count: add one from your cart state inside the link's text.
How does it work with a keyboard and a screen reader?
Tab walks the menu button on a phone, or Shop and Journal on a larger screen, then the wordmark (a link home), About, Stores and Bag. The current page is aria-current="page". The sheet is a dialog: focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button.
Related
- Pro
Floating Pill Navbar
Surface and themeA detached opaque pill navbar that hugs its content and floats centred in the page column, with the call to action inside it and a drawer menu on phones.
- Pro
Minimal Navbar
Link highlightsThe least navbar there is: a slim 48 px bar with a wordmark, three plain links and one Shine Button for a journaling app, with no motion, the current page marked by weight and a dot, and a bottom drawer on phones.
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.
- Pro
Segmented Control Navbar
Link highlightsA navbar for a meal-planning app that centres its three destinations in a tray of equal segments, each an icon, a label and a count, with one raised thumb that slides under the current one and folds to icons on a phone.
- Pro
Hover Highlight Navbar
Link highlightsA navbar for a tile shop whose five centred links share one soft block that glides to the link you hover or focus and fades out when you leave, with the current page marked by a heavier label and a dot instead.
- Pro
Gradient Border Navbar
Link highlightsA navbar with a soft hairline glint on the page rule under the current link, fainter on hover and focus, with no border added and nothing that moves, and a sheet menu on phones.