Navigation

Tabs

Controlled via bind:active or uncontrolled. Supports disabled tabs.

Usage

<script>
  import Tabs from '$lib/components/ui/Tabs.svelte';
  import TabPanel from '$lib/components/ui/TabPanel.svelte';

  const tabs = [
    { id: 'one', label: 'One' },
    { id: 'two', label: 'Two' },
  ];
  let active = $state('one');
</script>

<Tabs {tabs} bind:active>
  {#snippet children({ activeTab })}
    <TabPanel id="one" {activeTab}>Content A</TabPanel>
    <TabPanel id="two" {activeTab}>Content B</TabPanel>
  {/snippet}
</Tabs>

Breadcrumbs

Lightweight path navigation. Pure HTML and CSS with the current location separated from interactive ancestors.

Collapse

Disclosure content built on native details and summary.

Pagination

Page navigation for indexed lists. Keep previous and next explicit and mark the current page with aria-current.

Navbar

Sticky header with brand, desktop nav links and action slot for compact controls like account dropdowns.

<script>
  import Navbar from '$lib/components/layout/Navbar.svelte';
  import { page } from '$app/state';

  const items = [
    { href: '/', label: 'Home' },
    { href: '/docs', label: 'Docs' },
  ];
</script>

<Navbar {items} currentPath={page.url.pathname}>
  {#snippet brand()}
    <a href="/" class="font-display font-semibold text-neutral-12">Vulppi</a>
  {/snippet}
  {#snippet actions()}
    <button class="btn btn-sm color-group-primary">Get Started</button>
  {/snippet}
</Navbar>

Toolbar

Compact action cluster for formatting, filtering and view controls. Pure CSS composition using existing button primitives.

Appbar

Section-level top bar for page title + contextual actions. Lighter than navbar and intended for in-app work areas.

Menu & Dropdown Menu

`menu` is the visual list primitive. `DropdownMenu` composes it with `popover`, anchor-based positioning and keyboard navigation.

Rules

• • Tabs são controladas via bind:active — o pai mantém o estado
• • Navbar usa currentPath para marcar link ativo
• • Breadcrumbs e pagination são CSS-only; a cor vem de color-group-*
• • Collapse deve preferir details/summary antes de qualquer componente Svelte
• • Toolbar e appbar são CSS-first; comportamento adicional é opcional e pode vir depois por composição
• • `menu` define estrutura e estados visuais; `DropdownMenu` só resolve toggle/overlay com elementos nativos
• • Em viewport menor que md, a navbar prioriza acoes compactas em vez de painel expansivel
• • Navbar é sticky top-0 por padrão