mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Danny WhiteandJoshen Lim
7d6995bbfe
## What kind of change does this PR introduce? Refactor, cleanup, and docs update. ## What is the current behavior? After the page-title rollout, `ProjectLayout` is still in a transitional state: - it accepts a deprecated `title` prop - it still supports a separate `browserTitle.surface` - wrapper layouts are split between passing `title` directly and passing `browserTitle.section` That makes the API harder to reason about than it needs to be, even though the rendered titles are already correct. ## What is the new behavior? This cleanup finishes the API simplification that came out of the stacked PR review: - wrapper layouts stay `title`-first for DX - `ProjectLayout` no longer accepts `title` - `product` is now the single source of truth for the project-surface title segment - `browserTitle` is now only used for extra browser-title metadata (`entity`, `section`, `override`) - the remaining project-scoped callers now pass `browserTitle.section` when they need a section label - docs now reflect the final pattern instead of the transitional one Rendered page titles stay the same. ## Additional context Checks run: - `pnpm --filter studio exec vitest --run lib/page-title.test.ts components/layouts/ProjectLayout/index.test.tsx` - `pnpm --filter studio typecheck` - `pnpm exec prettier --check ...` on touched files This is intended as the post-rollout cleanup PR based on Joshen's review feedback across the stacked title changes. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
---
|
|
title: Navigation
|
|
description: Navigation patterns help users understand where they are and where they can go next.
|
|
---
|
|
|
|
Supabase has a necessarily complex navigation system to handle multiple products and levels of hierarchy. This page introduces those general patterns, best practices, and the components involved.
|
|
|
|
## Components
|
|
|
|
### NavMenu
|
|
|
|
A horizontal list of related views within a consistent PageLayout context, allowing for clearer page-level organisation. Activating a NavMenu item should trigger a URL change.
|
|
|
|
[NavMenu component guidelines](../components/nav-menu)
|
|
|
|
## Page titles
|
|
|
|
Browser page titles should follow a consistent most-specific-first structure so tabs and browser history are easier to scan:
|
|
|
|
`Entity | Section | Surface | Project | Org | Supabase`
|
|
|
|
Examples:
|
|
|
|
- `users | Table Editor | My Project | My Org | Supabase`
|
|
- `Backups | Database | My Project | My Org | Supabase`
|
|
|
|
Implementation notes (Studio):
|
|
|
|
- Use the shared title formatter in `apps/studio/lib/page-title.ts`
|
|
- Prefer `ProjectLayout` for project-scoped pages
|
|
- Prefer a layout's explicit `title` prop when a wrapper layout exposes one
|
|
- Use `browserTitle.section` when rendering `ProjectLayout` directly
|
|
- Use `browserTitle.entity` for the most specific resource (table/function/query) when available
|
|
- Use `product` as the single source of truth for the project-level surface segment
|
|
- Avoid assembling `document.title` ad hoc in individual pages/layouts
|