shadcn.io is not affiliated with official shadcn/ui
Centered Logo Navbar Block for React Aria
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 React Aria, 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.