mirror of
https://github.com/supabase/supabase.git
synced 2026-06-05 12:22:26 +08:00
3068a6eabe
* chore: separate interfaces per bucket type * chore: reuse existing bucket creation modal for files * chore: allow external trigger for new bucket modal * chore: minor fixes * chore: full-size empty state * chore: files other tabs * fix: show tab bar when on file subroute * chore: use existing table component to list buckets * fix: tests * fix: build error * chore: remove future bucket type components from PR * fix: dependency * docs: add navigation and navmenu to design system * chore: clarify readme instructions * fix: remove unrelated changes * forgot changelog * improve contentlayer readme * mention PageLayout component
58 lines
1.4 KiB
Plaintext
58 lines
1.4 KiB
Plaintext
---
|
|
title: NavMenu
|
|
description: A horizontal list of related views within a consistent context.
|
|
component: true
|
|
---
|
|
|
|
<Admonition type="warning" title="Consider renaming">
|
|
This component is titled very similarly to the [Navigation Menu](../components/navigation-menu)
|
|
component. Consider renaming it to something like TabMenu or
|
|
[UnderlineNav](https://primer.style/product/components/underline-nav/).
|
|
</Admonition>
|
|
|
|
<ComponentPreview
|
|
name="nav-menu-demo"
|
|
className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
## Usage
|
|
|
|
NavBar is exclusively used as sub-navigation within PageLayout.
|
|
|
|
```tsx
|
|
import { NavMenu, NavMenuItem } from 'ui'
|
|
```
|
|
|
|
```tsx
|
|
<NavMenu>
|
|
<NavMenuItem active={true}>
|
|
<Link href="#">Overview</Link>
|
|
</NavMenuItem>
|
|
<NavMenuItem active={false}>
|
|
<Link href="#">Documentation</Link>
|
|
</NavMenuItem>
|
|
</NavMenu>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### With counter badges
|
|
|
|
You may include counter badges to indicate the number of items within a tab, for example the amount of buckets in storage.
|
|
|
|
<ComponentPreview
|
|
name="nav-menu-badges"
|
|
className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
|
|
/>
|
|
|
|
### With icons
|
|
|
|
You may include icons to more clearly represent the content of each tab. Every tab should have an icon (or no icon).
|
|
|
|
<ComponentPreview
|
|
name="nav-menu-icons"
|
|
className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
|
|
/>
|