SidebarNav

Uygulama sidebar'ları için grup, ikon ve sağda sayı gösterebilen dikey navigasyon.

import { Badge, SidebarNav } from "@merid/react";

export function Example() {
  return (
    <SidebarNav aria-label="Çalışma alanı">
      <SidebarNav.Item href="#" icon={<Icon />} active>
        Genel bakış
      </SidebarNav.Item>
      <SidebarNav.Item href="#" icon={<Icon />} trailing={<Badge>12</Badge>}>
        Gelen kutusu
      </SidebarNav.Item>
      <SidebarNav.Group label="Projeler">
        <SidebarNav.Item href="#">Northwind</SidebarNav.Item>
        <SidebarNav.Item href="#">Contoso</SidebarNav.Item>
      </SidebarNav.Group>
    </SidebarNav>
  );
}

Import

tsx

import { SidebarNav } from "@merid/react";

SidebarNavItem tek başına da export edilir ve SidebarNav.Item ile aynı component'tir.

Anatomi

tsx

<SidebarNav aria-label="…">
  <SidebarNav.Item href="…" icon={…} trailing={…} active />
  <SidebarNav.Group label="…">
    <SidebarNav.Item href="…" />
  </SidebarNav.Group>
</SidebarNav>

SidebarNav (ya da SidebarNav.Root): içinde liste olan bir <nav>.
SidebarNav.Item: kendi <li>'sine sarılmış bir link; isteğe bağlı ikon ve sağ taraf elemanı alır.
SidebarNav.Group: iç içe bir listeye ad veren, görünür etiketli bir <li>.

Örnekler

Router ile

Router'ının link component'ini as ile ver. Fazladan verdiğin prop'lar ona iletilir.

tsx

import Link from "next/link";
import { usePathname } from "next/navigation";
import { SidebarNav } from "@merid/react";

export function AppNav() {
  const pathname = usePathname();
  return (
    <SidebarNav aria-label="Ana menü">
      <SidebarNav.Item as={Link} href="/settings" active={pathname === "/settings"}>
        Ayarlar
      </SidebarNav.Item>
    </SidebarNav>
  );
}

API referansı

SidebarNav

<nav> render'lar ve onun tüm HTML attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`aria-label`	`string`	–	Landmark'ın erişilebilir adı (sayfada birden fazla nav varsa zorunlu).
`ref`	`Ref<HTMLElement>`	–	Nav elemanına iletilen ref.

SidebarNav.Item

Bir <li> içinde <a> (ya da as) render'lar; tüm anchor attribute'larını ve as ile verilen elemanın prop'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`active`	`boolean`	`false`	Geçerli sayfayı işaretler: aria-current="page" ve seçili stili uygular.
`icon`	`ReactNode`	–	Etiketin önünde gösterilen ikon (dekoratif).
`trailing`	`ReactNode`	–	Sağ taraftaki eleman, örneğin sayı gösteren bir Badge.
`as`	`ElementType`	`"a"`	<a> yerine render'lanacak eleman ya da component, örneğin bir router Link'i.
`ref`	`Ref<HTMLAnchorElement>`	–	Link'e iletilen ref.

SidebarNav.Group

<li> render'lar ve title dışındaki HTML attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`label`Zorunlu	`ReactNode`	–	Görünür grup başlığı; iç içe listenin etiketi de olur.

Stil verme

.mrd-sidebar-nav, .mrd-sidebar-nav__list: kök eleman ve her liste; öğeler arasında 2px boşluk.
.mrd-sidebar-nav__item: link; en az 36px yükseklik (kaba işaretçilerde 44px), --mrd-radius-md.
.mrd-sidebar-nav__item[aria-current="page"] (ayrıca data-state="active"): --mrd-accent-soft dolgu ve --mrd-accent-strong metin.
.mrd-sidebar-nav__icon, .mrd-sidebar-nav__label, .mrd-sidebar-nav__trailing: ikon slot'u, sığmayınca kısalan etiket, sağ taraf slot'u.
.mrd-sidebar-nav__group, .mrd-sidebar-nav__group-label: grup boşlukları ve grubun soluk etiketi.

Erişilebilirlik

Bir navigation landmark'ı için APG landmark bölgeleri rehberini izler; öğeler düz link olduğu için bir widget deseni yoktur.

Sayfada birden fazla nav varsa landmark'a aria-label ile ad ver.
Aktif link aria-current="page" taşır.
Her grubun iç içe listesi etiketini aria-labelledby ile görünür başlığından alır.
İkonlar aria-hidden'dır; anlamı etiket taşımalı.

Tuş	Ne yapar
`Tab`	Focus'u sonraki link'e taşır.
`ShiftTab`	Focus'u önceki link'e taşır.
`Enter`	Focus'taki link'e gider.

Kullanım ilkeleri

Yap

Etiketleri bir iki kelimede tut ve yalnızca bir öğeyi aktif işaretle.

Kaçın

Listeye “Yeni proje” butonu gibi aksiyonlar koymak; bunlar gidilecek bir sayfa değil.

Yap

trailing'i okunmamış öğeler gibi kullanıcının harekete geçtiği sayılar için kullan.

Kaçın

Yalnızca ikona güvenmek; etiket her zaman zorunlu.