# Beste UI
> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.
Markdown rendition of https://ui.beste.co/block/navbar30. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json
---
1. /
2. [Blocks](/blocks)
3. /
4. [Navigation](/blocks/navigation)
5. /
6. Centered Logo Split Nav
# Centered Logo Split NavFREE
Symmetrical navbar with centered logo flanked by navigation links on both sides and dropdown menus. Perfect for fashion brands and lifestyle sites wanting balanced visual hierarchy.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/navbar30`
## Navbar30: Centered Logo Split Nav
Symmetrical navbar with the logo centered between two independent groups of nav links, either of which can carry a click-to-open dropdown. Built for fashion and lifestyle sites that want balanced left/right visual weight instead of a single leading logo.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
### Installation
bashCopy
```
npx shadcn add "https://ui.beste.co/r/navbar30"
```
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/navbar30"
```
This installs the block to `components/beste/block/navbar30.tsx` and the shadcn/ui dependency it needs (`button`).
### Quick start
The installed file exports `navbar30Demo` alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
tsxCopy
```
import { Navbar30, navbar30Demo } from "@/components/beste/block/navbar30";
export default function Layout() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Navbar30 } from "@/components/beste/block/navbar30";
export default function Layout() {
return (
);
}
```
### Props
| Prop | Type | Default | Description |
| ------------- | -------------------------------- | ------- | ------------------------------------------------------------------------------ |
| logo | { text: string; href?: string } | – | Brand text and link, rendered centered; falls back to "Brand" / # when omitted |
| leftNavItems | NavItem\[\] | \[\] | Nav entries rendered to the left of the logo |
| rightNavItems | NavItem\[\] | \[\] | Nav entries rendered to the right of the logo, followed by button |
| button | { label: string; href?: string } | – | Single call-to-action button after the right nav group; omitted if not passed |
| className | string | – | Extra classes for the outer