xyd 0.1.0-beta - Coming Soon

/
Reference
/
Navigation Item

NavigationItem

Core interface for navigation items

Properties

  • title
    string
    The navigation item title
  • description
    string
    The navigation item description
  • page
    string
    The navigation page, if set it redirects to the page + matches based on routing
  • href
    string
    The navigation href, if set it redirects but does not match based on routing
  • icon
    React.ReactNode
    The navigation item icon
  • color
    string

    Accent color (any CSS color) for this item. Used by logoTrailing product switchers and accent-aware themes (e.g. terrarium ) to recolor the UI per product — the active item's color is applied as --theme-color-primary .

  • dropdownMenu

    Nested navigation rendered as a dropdown menu under this item.

    Recursive — a child may itself declare dropdownMenu to create submenus (e.g. api → [Browser SDK, REST API, GraphQL] ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu

    carrying menu-level options (e.g. ).

    • DropdownMenu
      DropdownMenu
      Object form of NavigationItem.dropdownMenu : the menu items plus menu-level options.
      • items
        array of NavigationItemRequired
        Core interface for navigation items
        • title
          string
          The navigation item title
        • description
          string
          The navigation item description
        • page
          string
          The navigation page, if set it redirects to the page + matches based on routing
        • href
          string
          The navigation href, if set it redirects but does not match based on routing
        • icon
          React.ReactNode
          The navigation item icon
        • color
          string
          Accent color (any CSS color) for this item. Used by `logoTrailing` product switchers and accent-aware themes (e.g. `terrarium` ) to recolor the UI per product — the active item's `color` is applied as `--theme-color-primary` .
        • dropdownMenu
          Nested navigation rendered as a dropdown menu under this item. Recursive — a child may itself declare `dropdownMenu` to create submenus (e.g. `api → [Browser SDK, REST API, GraphQL]` ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu carrying menu-level options (e.g. `{ itemsPerColumn: 7, items: [...] }` ).
          • DropdownMenu
            DropdownMenu
            Object form of NavigationItem.dropdownMenu : the menu items plus menu-level options.
            • items
              array of NavigationItemRequired
              The menu items.
            • itemsPerColumn
              number
              Maximum items rendered in ONE COLUMN — overflowing items wrap into additional columns (e.g. `7` renders a 12-item menu as two columns of 7 + 5). Omit for a single column.
          • NavigationItem[]
            NavigationItem[]
        • float
          "center" | "right"
          Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference). Honored only by the `tabs` appearance, and there only for `"right"` — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including `dropdownMenu` and route-prefix active highlighting.
        • pages
          array of NavigationItem
          Nested navigation items — recursive. Honored ONLY by sidebar-dropdown surfaces ( `navigation.sidebarDropdown` and `appearance: "sidebarDropdown"` segments): an entry with `pages` (typically without `page` / `href` ) renders as an inline-expandable GROUP row inside the dropdown popover — clicking it expands its children (indented) within the same popover. `title` , `icon` , and `description` apply to the group row. Other appearances (tabs, logoTrailing) ignore nesting.
        • trigger
          "hover" | "click"
          How the `dropdownMenu` opens. Defaults to `"hover"` .
      • itemsPerColumn
        number

        Maximum items rendered in ONE COLUMN — overflowing items wrap into additional columns (e.g. 7 renders a 12-item menu as two columns of 7 + 5). Omit for a single column.

    • NavigationItem[]
      NavigationItem[]
  • float
    "center" | "right"

    Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference).

    Honored only by the tabs appearance, and there only for "right" — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including

    dropdownMenu and route-prefix active highlighting.

  • pages
    array of NavigationItem
    Core interface for navigation items
    • title
      string
      The navigation item title
    • description
      string
      The navigation item description
    • page
      string
      The navigation page, if set it redirects to the page + matches based on routing
    • href
      string
      The navigation href, if set it redirects but does not match based on routing
    • icon
      React.ReactNode
      The navigation item icon
    • color
      string
      Accent color (any CSS color) for this item. Used by `logoTrailing` product switchers and accent-aware themes (e.g. `terrarium` ) to recolor the UI per product — the active item's `color` is applied as `--theme-color-primary` .
    • dropdownMenu
      Nested navigation rendered as a dropdown menu under this item. Recursive — a child may itself declare `dropdownMenu` to create submenus (e.g. `api → [Browser SDK, REST API, GraphQL]` ). Supported on header anchors and tabs. Accepts a plain item array, or the object form DropdownMenu carrying menu-level options (e.g. `{ itemsPerColumn: 7, items: [...] }` ).
      • DropdownMenu
        DropdownMenu
        Object form of NavigationItem.dropdownMenu : the menu items plus menu-level options.
        • items
          array of NavigationItemRequired
          The menu items.
        • itemsPerColumn
          number
          Maximum items rendered in ONE COLUMN — overflowing items wrap into additional columns (e.g. `7` renders a 12-item menu as two columns of 7 + 5). Omit for a single column.
      • NavigationItem[]
        NavigationItem[]
    • float
      "center" | "right"
      Render this item on the RIGHT of the header rather than with its siblings, before the search box — for a tab that is a reference you look things up in rather than a stop in the reading order (e.g. an API reference). Honored only by the `tabs` appearance, and there only for `"right"` — the union matches WebEditorHeader , which intersects this type and already carries both values. The item keeps everything a centered tab has, including `dropdownMenu` and route-prefix active highlighting.
    • pages
      array of NavigationItem
      Nested navigation items — recursive. Honored ONLY by sidebar-dropdown surfaces ( `navigation.sidebarDropdown` and `appearance: "sidebarDropdown"` segments): an entry with `pages` (typically without `page` / `href` ) renders as an inline-expandable GROUP row inside the dropdown popover — clicking it expands its children (indented) within the same popover. `title` , `icon` , and `description` apply to the group row. Other appearances (tabs, logoTrailing) ignore nesting.
    • trigger
      "hover" | "click"
      How the `dropdownMenu` opens. Defaults to `"hover"` .
  • trigger
    "hover" | "click"

    How the dropdownMenu opens. Defaults to "hover" .

Built with

Show your support! Star us on GitHub ⭐️