---
title: Nav
description: A nav tree with roving focus, typeahead, collapsible groups that animate, and a guide ladder down the left edge.
source: nav
---
```tsx title="primitives/nav/demos/basic.tsx"
"use client";
import { Nav } from "@intentface/chat/nav";
import { type ComponentProps, useState } from "react";
/*
* Modelled on the hard case: a section group with no rail, a group two levels
* in that has branches, plain indented lists nested inside it, an outer rail
* carrying on past an expanded inner group, and a collapsed group as the last
* child.
*
* All of it is one `Nav.Group` nesting inside itself. There is no second set of
* parts for the nesting and no depth-aware CSS — the rail recipe below is a
* single rule that works at any depth. The Root's `guide` is the default every
* list inherits — "indent", a lane with nothing drawn in it — and lists opt
* out with "none" or up to "branches" where the tree forks.
*
* Leaves are real links. `render` in its function form hands over everything
* the part would have put on its own div — attributes, handlers, ref, children
* — and you decide the element. (That form is also why this is a client
* component: a function cannot cross the server boundary. The element form,
* `render={}`, can.)
*
* Written out in full rather than folded into a local Row component, so the
* anatomy here is the anatomy of the primitive.
*/
export const Basic = () => {
const [current, setCurrent] = useState("chat-views");
return (
}
className="flex flex-col gap-0.5 px-2"
>
setCurrent("overview"))}
>
Overview setCurrent("inbox"))}
>
Inbox
{/* A section heading whose children are a plain indented list. `guide`
is a prop rather than something derived from depth precisely so a
railless group stays possible. */}
Your teamsIntentface
{/* Elbows, and only on groups — one at every leaf turns the rail
into a comb and buries where the tree actually forks. */}
setCurrent("team-home"))}
>
Home setCurrent("team-issues"))}
>
Issues
{/* The rail above carries on past this whole group to its next
sibling — that is what the ::after on a group child is for.
The group's own list inherits "indent" and just indents. */}
Chat setCurrent("chat-home"))}
>
Home setCurrent("chat-views"))}
>
Views
{/* Collapsed, and the last child — so the rail stops at its
elbow rather than running on into empty space. */}
Website setCurrent("site-home"))}
>
Home