import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@pelagornis/page/components";

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="/" active>
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem value="docs">
          <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/guides/getting-started/">Getting started</NavigationMenuLink>
            <NavigationMenuLink href="/components/">Components</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="https://ui.pelagornis.com/">RefineUI</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

MDX で使う

Navigation Menu は React の状態を共有する複数のパーツで構成されます。MDX に書いた子要素はそれぞれ別のアイランドとして描画されるため、パーツ同士がつながりません。上の例のように .tsx ファイルで組み立て、そのファイルをインポートしてください。

---
title: Example
---

import NavigationMenuExample from "../../components/NavigationMenuExample";

<NavigationMenuExample client:load />

client:load はページの読み込み時にアイランドをハイドレートします。ページの下の方にあるコンテンツには client:visible を使ってください。

Markdoc で使う

Markdoc のタグは Astro コンポーネントを描画しますが、このコンポーネントにはクライアントの状態が必要です。例をハイドレートする .astro ファイルで包み、そのファイルをタグとして登録してください。

---
import NavigationMenuExample from "../NavigationMenuExample";
---

<NavigationMenuExample client:load />

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "navigation-menu-example": {
      render: component("./src/components/markdoc/NavigationMenuExample.astro"),
      selfClosing: true,
    },
  },
});

{% navigation-menu-example /%}

構造

コンポーネントを構成するパーツと、それぞれが描画する data-refineui のロールです。

パーツ	ロール
`root`	navigation-menu
`content`	navigation-menu-content
`content_panel`	navigation-menu-content-panel
`indicator`	navigation-menu-indicator
`item`	navigation-menu-item
`link`	navigation-menu-link
`list`	navigation-menu-list
`trigger`	navigation-menu-trigger

状態

コンポーネントがスタイルを当てる状態です。コンポーネントの状態は data 属性として公開されます。

種類	状態
疑似クラス	`focus-visible`
data-state	`open` `closed`

キーボード

フォーカスがあるときにコンポーネントが処理するキーです。

キー	動作
`Escape`	close
`Enter`	activate
`Space`	activate

参考

デザインのガイドとトークンの詳細は RefineUI · Navigation Menu を参照してください。
共通のルールは MDX で使うと Markdoc で使うを参照してください。