---
title: "Top nav app shell"
description: "Kilnwork for teachers: sections as tabs across the top, a row of the section's pages, notifications, and the week's classes with next steps."
plan: Pro
docs: https://ui.edbn.me/docs/templates/app-shell-top-nav
---

# Top nav app shell

Kilnwork for teachers: sections as tabs across the top, a row of the section's pages, notifications, and the week's classes with next steps.

No sidebar: the header has the wordmark, My classes, Students, Messages and Resources as tabs (the current one filled), search with ⌘K, notifications and the teacher's menu. A row under it holds the current section's pages. Notifications open in a popover with unread marks, a count on the bell and Mark all as read. Under 1024px search folds behind a button that opens the field under the header (Esc closes it); under 768px the sections and their pages move into a sheet that closes once a page is chosen. My classes this week lists each class with its day and time, room, bookings, where it stands and a next step, beside a to-do list that ticks off. The other pages are short real lists, and each page's heading takes focus as you move between them. The sample opens with three unread notifications on the bell and one to-do ticked; without it, everything is read and nothing ticked. Notifications open on click.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/app-shell-top-nav
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, avatar, badge, button, card, checkbox, dropdown-menu, input-group, kbd, label, navigation-menu, popover, sheet, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More app shells templates

All 3, with install commands: https://ui.edbn.me/docs/templates/app-shells (Markdown: https://ui.edbn.me/docs/templates/app-shells.md)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt