---
title: 'Navigation and theming'
description: 'Customize supported Studio navigation contributions and styles.'
---

# Navigation and theming

Extensions can replace the supported navbar logo, project selector, and search contributions. Use the public `StudioExtension` contract and register replacements in the intended project.

## Contribution contracts

| Contribution             | Props and responsibility                                                                        |
| ------------------------ | ----------------------------------------------------------------------------------------------- |
| `navbar.logo`            | Receives `theme` and `title`; render a recognizable, accessible identity.                       |
| `navbar.projectSelector` | Receives current `projectId` and projects; preserve correct project navigation.                 |
| `navbar.search`          | Receives `projectId`, schema, and `onSelect`; return the expected record identity on selection. |

Where multiple extensions provide a component replacement, the first resolved contribution is selected. Nested extension ordering can therefore affect the result. Test the final project configuration rather than relying on package installation order.

## Styling

Load Studio and each installed extension's CSS once through the framework's supported stylesheet entry. Scope extension styles to avoid overriding unrelated app controls. Check light/dark themes, readable contrast, focus states, long labels, and small viewports.

Do not depend on untyped navigation replacements or command declarations without a documented runtime contract. Use [custom app routes](/docs/extensions/create-an-extension) for additional workspaces.


---

[View full sitemap](/docs/sitemap.md)