# Nav Icon

Iconografia compacta para navegação, cabeçalhos e menus.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Ações & Navegação
- Status: stable
- Relacionados: /componentes/button.md, /componentes/link.md, /componentes/breadcrumb.md

## Em cada stack

- HTML e Astro: Classes `itps-*` do CSS Sinapse, com todas as variantes desta página.
- React e Vue: Composição com o Button Sinapse; as variantes `itps-*` desta página existem só no HTML.

**React/Next (shadcn/ui)**

```tsx
import { IconCode, IconLayoutGrid, IconPalette } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";

export function NavLinks() {
  return (
    <nav className="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
      <Button asChild variant="ghost" size="sm">
        <a href="/estilos">
          <IconPalette className="size-4" aria-hidden="true" />
          Estilos
        </a>
      </Button>

      <Button asChild variant="ghost" size="sm">
        <a href="/componentes">
          <IconLayoutGrid className="size-4" aria-hidden="true" />
          Componentes
        </a>
      </Button>

      <Button asChild variant="ghost" size="sm">
        <a href="/comecar">
          <IconCode className="size-4" aria-hidden="true" />
          Comece por aqui
        </a>
      </Button>
    </nav>
  );
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<script setup lang="ts">
import { IconCode, IconLayoutGrid, IconPalette } from "@tabler/icons-vue";

import { Button } from "@/components/ui/button";
</script>

<template>
  <nav class="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
    <Button as-child variant="ghost" size="sm">
      <a href="/estilos">
        <IconPalette class="size-4" aria-hidden="true" />
        Estilos
      </a>
    </Button>

    <Button as-child variant="ghost" size="sm">
      <a href="/componentes">
        <IconLayoutGrid class="size-4" aria-hidden="true" />
        Componentes
      </a>
    </Button>

    <Button as-child variant="ghost" size="sm">
      <a href="/comecar">
        <IconCode class="size-4" aria-hidden="true" />
        Comece por aqui
      </a>
    </Button>
  </nav>
</template>
```

**HTML (copy-first)**

```html
<nav class="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
  <a href="/estilos" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-palette" aria-hidden="true"></i>
    <span>Estilos</span>
  </a>

  <a href="/componentes" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-layout-grid" aria-hidden="true"></i>
    <span>Componentes</span>
  </a>

  <a href="/comecar" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-code" aria-hidden="true"></i>
    <span>Comece por aqui</span>
  </a>
</nav>
```

## Instalação

O comando instala o Button Sinapse com o tema Sinapse. Configure o registry uma vez por projeto em [Comece por aqui](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/nav-icon
```

**terminal · Vue 3/Nuxt 4**

```sh
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/nav-icon.json
```

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

## Uso

Use `itps-nav-icon` como classe visual para Tabler Icons decorativos em links, botões e itens de navegação. O texto da ação deve aparecer ao lado do ícone ou estar no controle por `aria-label`.

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use `Button` como componente primitivo interativo e ícones Tabler (`@tabler/icons-react` ou `@tabler/icons-vue`). Para HTML ou wrappers finos, use `itps-nav-icon` no `i.ti` da webfont Tabler.

## Exemplos

### Ícone isolado

Quando o controle tem apenas ícone, o nome acessível fica no próprio `button` ou `a`. Em shadcn, use `Button` com `size="icon"` e `asChild`/`as-child` quando o destino for link.

**React/Next (shadcn/ui)**

```tsx
import { IconLayoutGrid, IconMenu2, IconMoon } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";

export function NavActions() {
  return (
    <div className="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
      <Button variant="ghost" size="icon" aria-label="Abrir menu">
        <IconMenu2 className="size-4" aria-hidden="true" />
      </Button>

      <Button asChild variant="ghost" size="icon">
        <a href="/componentes" aria-label="Ver componentes">
          <IconLayoutGrid className="size-4" aria-hidden="true" />
        </a>
      </Button>

      <Button variant="ghost" size="icon" aria-label="Alternar tema">
        <IconMoon className="size-4" aria-hidden="true" />
      </Button>
    </div>
  );
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<script setup lang="ts">
import { IconLayoutGrid, IconMenu2, IconMoon } from "@tabler/icons-vue";

import { Button } from "@/components/ui/button";
</script>

<template>
  <div class="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
    <Button variant="ghost" size="icon" aria-label="Abrir menu">
      <IconMenu2 class="size-4" aria-hidden="true" />
    </Button>

    <Button as-child variant="ghost" size="icon">
      <a href="/componentes" aria-label="Ver componentes">
        <IconLayoutGrid class="size-4" aria-hidden="true" />
      </a>
    </Button>

    <Button variant="ghost" size="icon" aria-label="Alternar tema">
      <IconMoon class="size-4" aria-hidden="true" />
    </Button>
  </div>
</template>
```

**HTML (copy-first)**

```html
<div class="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
  <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Abrir menu">
    <i class="itps-nav-icon itps-nav-icon--sm ti ti-menu-2" aria-hidden="true"></i>
  </button>

  <a href="/componentes" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Ver componentes">
    <i class="itps-nav-icon ti ti-layout-grid" aria-hidden="true"></i>
  </a>

  <button type="button" class="inline-flex h-12 w-12 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Alternar tema">
    <i class="itps-nav-icon itps-nav-icon--lg ti ti-moon" aria-hidden="true"></i>
  </button>

  <button type="button" class="inline-flex h-14 w-14 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Abrir painel">
    <i class="itps-nav-icon itps-nav-icon--xl ti ti-layout-sidebar-right" aria-hidden="true"></i>
  </button>
</div>
```

## API copy-first

| Classe/atributo | Uso |
|-----------------|-----|
| `itps-nav-icon` | Classe base para o `i.ti`; herda cor por `currentColor`. |
| `itps-nav-icon--sm` | Ajusta o ícone para 16px. |
| `itps-nav-icon--lg` | Ajusta o ícone para 24px. |
| `itps-nav-icon--xl` | Ajusta o ícone para 32px. |
| `ti ti-<nome>` | Nome do ícone Tabler distribuído pela webfont do sistema. |
| `aria-hidden="true"` | Esconde ícones decorativos de tecnologias assistivas. |
| `aria-label` | Nomeia controles somente com ícone. |
| `button` | Representa ações de interface. |
| `a` | Representa navegação real para outra URL. |

## Acessibilidade

Marque ícones decorativos com `aria-hidden="true"`. Em links com texto visível, o texto é o nome acessível; o ícone não precisa ser anunciado. Em botões ou links somente com ícone, defina `aria-label` no elemento interativo. Use `button` para ações e `a` para navegação.