---
title: App
description: App protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

Base Navigation Item Schema

Shared properties for all navigation types.

**NAMING CONVENTION:**

Navigation item IDs are used in URLs and configuration and must be lowercase snake_case.

@example Good IDs

- 'menu_accounts'

- 'page_dashboard'

- 'nav_settings'

@example Bad IDs (will be rejected)

- 'MenuAccounts' (PascalCase)

- 'Page Dashboard' (spaces)

<Callout type="info">
**Source:** `packages/spec/src/ui/app.zod.ts`
</Callout>

## TypeScript Usage

```typescript
import { AppBranding, AppContextSelector } from '@objectstack/spec/ui';
import type { AppBranding, AppContextSelector } from '@objectstack/spec/ui';

// Validate data
const result = AppBranding.parse(data);
```

---

## AppBranding

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **primaryColor** | `string` | optional | Primary theme color hex code |
| **logo** | `string` | optional | Custom logo URL for this app |
| **favicon** | `string` | optional | Custom favicon URL for this app |


---

## AppContextSelector

### Properties

| Property | Type | Required | Description |
| :--- | :--- | :--- | :--- |
| **id** | `string` | ✅ | Selector id; selected value is exposed as the nav template var `{<id>}` |
| **label** | `string` | ✅ | Dropdown label |
| **icon** | `string` | optional | Icon name |
| **optionsSource** | `Object` | ✅ | Option data source |
| **includeAll** | `boolean` | ✅ | Prepend an "All" option that clears the scope |
| **allValue** | `string` | ✅ | Template value when "All" is selected (empty = no filter) |
| **persist** | `Enum<'query' \| 'session' \| 'none'>` | ✅ | Persist selection via URL query, sessionStorage, or not at all |
| **placement** | `Enum<'sidebar_header' \| 'topbar'>` | ✅ | Render location in the app chrome |


---

