Nav

2026.1

Requires Celeste 2026.1

Horizontal Layout

Horizontal Layout with Custom Dropdown

Vertical Layout

For your main site navigation, there is a pre-constructed <Menu /> component that will use links from the WordPress Menus screen. It uses this component, so take a look at it to see another example of how this component works.

Properties

Prop	Description
`layout`	Layout of the navigation, `horizontal` or `vertical`

How to use it

<div class="flow flow-space-2xl">

    <!-- Default, horizontal layout -->
    <div class="flow flow-space-xs">
        <h2>Horizontal Layout</h2>
        <Nav>
            <Nav.Item href="/">Home</Nav.Item>
            <Nav.Item href="/about/">About</Nav.Item>
            <Nav.Item href="/services/">
                Services
                <Icon name="caret-down" />

                <Slot name="dropdown">
                    <Nav.Dropdown>
                        <Nav layout="vertical">
                            <Nav.Item href="/services/websites">Websites</Nav.Item>
                            <Nav.Item href="/services/marketing">Marketing</Nav.Item>
                            <Nav.Item href="/services/whatnot">&amp; What Not</Nav.Item>
                        </Nav>
                    </Nav.Dropdown>
                </Slot>
            </Nav.Item>
            <Nav.Item href="/contact/">Contact</Nav.Item>
        </Nav>
    </div>

    <div class="flow flow-space-xs">
        <h2>Horizontal Layout with Custom Dropdown</h2>
        <Nav>
            <Nav.Item href="/">Home</Nav.Item>
            <Nav.Item href="/about/">About</Nav.Item>
            <Nav.Item href="/services/">
                Services
                <Icon name="caret-down" />

                <Slot name="dropdown">
                    <Nav.Dropdown custom>
                        <div class="bg-gray-900 p-md rounded min-w-120 text-white">
                            <h3>Custom Dropdown</h3>
                            <p class="text-sm text-balance">Put whatever you like in here, if you want.</p>
                            <Button href="#" class="mt-2">Learn more</Button>
                        </div>
                    </Nav.Dropdown>
                </Slot>
            </Nav.Item>
            <Nav.Item href="/contact/">Contact</Nav.Item>
        </Nav>
    </div>

    <!-- Vertical orietentation -->
    <div class="flow flow-space-xs">
        <h2>Vertical Layout</h2>
        <Nav layout="vertical">
            <Nav.Item href="/">Home</Nav.Item>
            <Nav.Item href="/about/">About</Nav.Item>
            <Nav.Item href="/services/">Services</Nav.Item>
            <Nav.Item href="/contact/">Contact</Nav.Item>
        </Nav>
    </div>

</div>