import { NavigationMenu } from "@meridui/react";

export function SiteNav() {
  return (
    <NavigationMenu.Root aria-label="Ürün sitesi">
      <NavigationMenu.List>
        <NavigationMenu.Item value="products">
          <NavigationMenu.Trigger>Ürünler</NavigationMenu.Trigger>
          <NavigationMenu.Content fullWidth>
            <NavigationMenu.Link href="/analytics" description="Dashboard'lar, huniler ve elde tutma.">
              Analitik
            </NavigationMenu.Link>
            <NavigationMenu.Link href="/billing" description="Faturalar, planlar ve kullanıma göre fiyatlandırma.">
              Faturalandırma
            </NavigationMenu.Link>
            {/* … */}
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item value="resources">
          <NavigationMenu.Trigger>Kaynaklar</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="/docs">Dokümantasyon</NavigationMenu.Link>
            <NavigationMenu.Link href="/guides">Rehberler</NavigationMenu.Link>
            <NavigationMenu.Link href="/changelog">Sürüm notları</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="/pricing" active>Fiyatlar</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  );
}

Import

import { NavigationMenu } from "@meridui/react";

Anatomi

<NavigationMenu.Root>
  <NavigationMenu.List>
    <NavigationMenu.Item value="products">
      <NavigationMenu.Trigger />
      <NavigationMenu.Content>
        <NavigationMenu.Link />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
    <NavigationMenu.Item>
      <NavigationMenu.Link />
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>

Root <nav> landmark'ıdır ve hangi panelin açık olduğunu tutar (aynı anda bir tane).
List ve Item, çubuğun <ul> ve <li> elemanlarıdır.
Trigger bir disclosure <button>'ıdır; Content onun link panelidir. fullWidth mega menü için paneli çubuk boyunca yayar.
Link bir <a>'dır; doğrudan bir Item içinde (üst seviye link) ya da Content içinde durur. description ikinci bir satır ekler.

Örnekler

Router link'leri

asChild router'ının link'ini aynı stil ve davranışla render'lar; active, aria-current="page" atar.

import NextLink from "next/link";

<NavigationMenu.Link asChild active={pathname === "/pricing"}>
  <NextLink href="/pricing">Fiyatlar</NextLink>
</NavigationMenu.Link>

Content'e fullWidth ver: panel tüm çubuk boyunca yayılır ve link'leri responsive bir grid'e dizer. 640px'in altında her panel çubuk boyunca yayılır.

API referansı

Root

Tüm <nav> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`value`	`string`	–	Controlled açık öğe (hiçbiri açık değilse "").
`defaultValue`	`string`	`""`	Uncontrolled kullanımda başlangıçta açık öğe.
`onValueChange`	`(value: string) => void`	–	Açık öğenin değeriyle çağrılır.
`openDelay`	`number`	`150`	Hover'da panel açılmadan önceki gecikme, ms. Tıklama ve tuşlar hemen açar.
`closeDelay`	`number`	`250`	İmleç ayrıldıktan sonra panel kapanmadan önceki gecikme, ms.
`aria-label`	`string`	`"Main"`	Navigasyon landmark'ının erişilebilir adı.
`ref`	`Ref<HTMLElement>`	–	<nav>'a iletilen ref.

Item

Prop	Tip	Varsayılan	Açıklama
`value`	`string`	–	Benzersiz değer; controlled kullanım için gerekir. Varsayılanı üretilen bir id.

Trigger, Content

Trigger tüm <button>, Content tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`Content fullWidth`	`boolean`	`false`	Çubuğun tam genişliğine yayılır (mega menü).

Link

Tüm <a> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`active`	`boolean`	`false`	Geçerli sayfayı işaretler (aria-current="page").
`description`	`string`	–	Panel içindeki link'ler için etiketin altındaki ikinci satır.
`asChild`	`boolean`	`false`	<a> yerine tek child elemanı (bir router link'i) render'lar.
`ref`	`Ref<HTMLAnchorElement>`	–	İletilen ref.

Stil verme

Sınıf	Eleman
`.mrd-navmenu`	Root
`.mrd-navmenu__list`, `.mrd-navmenu__item`	List ve Item
`.mrd-navmenu__trigger`, `.mrd-navmenu__chevron`	Trigger ve ikonu
`.mrd-navmenu__content`	Content
`.mrd-navmenu__link`, `.mrd-navmenu__link-title`, `.mrd-navmenu__link-description`	Link parçaları

Attribute	Nerede	Değerler
`data-state`	Root, Item, Trigger, Content	`open`, `closed`
`data-full`	Content	`fullWidth` verildiğinde bulunur
`data-active`	Link	`active` iken bulunur

role="menubar" yerine WAI-ARIA Disclosure navigation menu örneğini izler: site navigasyonu bir link listesidir ve her tetikleyici ile link Tab sırasında kalır. Paneller kapalıyken de DOM'da (hidden) durur; böylece link'leri taranabilir. Focus'un nav'dan çıkması, Escape ya da dışarıya tıklama açık paneli kapatır.

Tuş	Ne yapar
`EnterSpace`	Tetikleyicide: panelini açar ya da kapatır.
`ArrowDown`	Tetikleyicide: açar ve ilk link'e focus verir. Panelde: sonraki link.
`ArrowUp`	Panelde: önceki link.
`ArrowRightArrowLeft`	Sonraki / önceki tetikleyici ya da üst seviye link (RTL'de ters).
`HomeEnd`	İlk / son tetikleyici ya da üst seviye link.
`Escape`	Paneli kapatır ve focus'u tetikleyicisine döndürür.
`Tab`	Tetikleyiciler ve link'ler arasında sırayla ilerler.

Kullanım ilkeleri

Yap

Üst seviye etiketleri kısa tut ve en çok ziyaret edilen hedefleri başa koy.

Kaçın

NavigationMenu'yü uygulama komutları için kullanmak. Aksiyonların yeri DropdownMenu ya da Toolbar.

İlgili sayfalar

SidebarNav: uygulama sidebar'ları için dikey navigasyon.
Breadcrumb: geçerli sayfanın yeri.

NavigationMenu