Navbar

A top bar with optional start / center / end slots.

Real use · site header

Glass · floating over a hero

Using Navbar

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Navbar — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class navbar, with 3 modifiers:

.navbar
.navbar-center
.navbar-end
.navbar-start

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Navbar } from "@wizeworks/silicaui-react";

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { Navbar, NavbarStart, NavbarCenter, NavbarEnd, Button } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function NavbarDemo() {
    return (
        <>
            <Section title="Real use · site header">
                <Navbar className="rounded-box border border-base-300">
                    <NavbarStart>
                        <span className="text-lg font-bold">◆ Silica</span>
                    </NavbarStart>
                    <NavbarCenter className="hidden gap-4 text-sm sm:flex">
                        <a href="#">Docs</a>
                        <a href="#">Components</a>
                        <a href="#">Pricing</a>
                    </NavbarCenter>
                    <NavbarEnd>
                        <Button variant="ghost" color="neutral">
                            Sign in
                        </Button>
                        <Button color="primary">Get started</Button>
                    </NavbarEnd>
                </Navbar>
            </Section>

            <Section title="Glass · floating over a hero">
                <div
                    className="flex flex-col gap-24 rounded-box p-4"
                    style={{
                        backgroundImage:
                            "linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))",
                    }}
                >
                    <Navbar className="glass">
                        <NavbarStart>
                            <span className="text-lg font-bold">◆ Silica</span>
                        </NavbarStart>
                        <NavbarCenter className="hidden gap-4 text-sm sm:flex">
                            <a href="#">Docs</a>
                            <a href="#">Components</a>
                            <a href="#">Pricing</a>
                        </NavbarCenter>
                        <NavbarEnd>
                            <Button variant="ghost" color="neutral">
                                Sign in
                            </Button>
                            <Button color="primary">Get started</Button>
                        </NavbarEnd>
                    </Navbar>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Navbar / Table — structural containers (children authored in the tree). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Navbar", "navbar", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "navbar navbar-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: nothing — this one is static markup

The full API for Navbar, on every path, is available through the Silica MCP server.