{"id":134487,"date":"2021-03-09T08:38:21","date_gmt":"2021-03-09T08:38:21","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/navigation\/"},"modified":"2026-04-23T08:31:52","modified_gmt":"2026-04-23T08:31:52","slug":"navigation","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/navigation\/","title":{"rendered":"Navigation"},"content":{"rendered":"
\nThis component is deprecated. Consider using `Navigator` instead.\n<\/div>\n
\nThis feature is still experimental. \u201cExperimental\u201d means this is an early implementation subject to drastic and breaking changes.\n<\/div>\n

Render a navigation list with optional groupings and hierarchy.<\/p>\n

Usage<\/h2>\n
import {\n    __experimentalNavigation as Navigation,\n    __experimentalNavigationGroup as NavigationGroup,\n    __experimentalNavigationItem as NavigationItem,\n    __experimentalNavigationMenu as NavigationMenu,\n} from '@wordpress\/components';\n\nconst MyNavigation = () => (\n    <Navigation>\n        <NavigationMenu title=\"Home\">\n            <NavigationGroup title=\"Group 1\">\n                <NavigationItem item=\"item-1\" title=\"Item 1\" \/>\n                <NavigationItem item=\"item-2\" title=\"Item 2\" \/>\n            <\/NavigationGroup>\n            <NavigationGroup title=\"Group 2\">\n                <NavigationItem\n                    item=\"item-3\"\n                    navigateToMenu=\"category\"\n                    title=\"Category\"\n                \/>\n            <\/NavigationGroup>\n        <\/NavigationMenu>\n\n        <NavigationMenu\n            backButtonLabel=\"Home\"\n            menu=\"category\"\n            parentMenu=\"root\"\n            title=\"Category\"\n        >\n            <NavigationItem badge=\"1\" item=\"child-1\" title=\"Child 1\" \/>\n            <NavigationItem item=\"child-2\" title=\"Child 2\" \/>\n        <\/NavigationMenu>\n    <\/Navigation>\n);\n<\/code><\/pre>\n
Navigation Props<\/h2>\n
Navigation<\/code> supports the following props.<\/p>\n
activeItem<\/code><\/h3>\n
    \n
  • Type: string<\/code><\/li>\n
  • Required: No<\/li>\n<\/ul>\n
    The active item slug.<\/p>\n
    activeMenu<\/code><\/h3>\n
      \n
    • Type: string<\/code><\/li>\n
    • Required: No<\/li>\n
    • Default: “root”<\/li>\n<\/ul>\n
      The active menu slug.<\/p>\n
      className<\/h3>\n
        \n
      • Type: string<\/code><\/li>\n
      • Required: No<\/li>\n<\/ul>\n
        Optional className for the Navigation<\/code> component.<\/p>\n
        onActivateMenu<\/code><\/h3>\n
          \n
        • Type: function<\/code><\/li>\n
        • Required: No<\/li>\n<\/ul>\n
          Sync the active menu between the external state and the Navigation’s internal state.<\/p>\n
          Navigation Menu Props<\/h2>\n
          NavigationMenu<\/code> supports the following props.<\/p>\n
          backButtonLabel<\/code><\/h3>\n
            \n
          • Type: string<\/code><\/li>\n
          • Required: No<\/li>\n
          • Default: parent menu’s title or “Back”<\/li>\n<\/ul>\n
            The back button label used in nested menus. If not provided, the label will be inferred from the parent menu’s title.
            \nIf for some reason the parent menu’s title is not available then it will default to “Back”.<\/p>\n
            onBackButtonClick<\/code><\/h3>\n
              \n
            • Type: function<\/code><\/li>\n
            • Required: No<\/li>\n<\/ul>\n
              A callback to handle clicking on the back button. If this prop is provided then the back button will be shown.<\/p>\n
              className<\/h3>\n
                \n
              • Type: string<\/code><\/li>\n
              • Required: No<\/li>\n<\/ul>\n
                Optional className for the NavigationMenu<\/code> component.<\/p>\n
                hasSearch<\/h3>\n
                  \n
                • Type: boolean<\/code><\/li>\n
                • Required: No<\/li>\n<\/ul>\n
                  Enable the search feature on the menu title.<\/p>\n
                  menu<\/code><\/h3>\n
                    \n
                  • Type: string<\/code><\/li>\n
                  • Required: No<\/li>\n
                  • Default: “root”<\/li>\n<\/ul>\n
                    The unique identifier of the menu. The root menu can omit this, and it will default to “root”; all other menus need to specify it.<\/p>\n
                    onSearch<\/h3>\n
                      \n
                    • Type: ( searchString: string ) => void;<\/code><\/li>\n
                    • Required: No<\/li>\n<\/ul>\n
                      When hasSearch<\/code> is active, this function handles the search input’s onChange<\/code> event, making it controlled from the outside. It requires setting the search<\/code> prop as well.<\/p>\n
                      isSearchDebouncing<\/h3>\n
                        \n
                      • Type: boolean<\/code><\/li>\n
                      • Required: No<\/li>\n<\/ul>\n
                        Indicates whether the search is debouncing or not. In case of true<\/code> the “No results found.” text is omitted. Used to prevent showing “No results found.” text between debounced searches.<\/p>\n
                        parentMenu<\/code><\/h3>\n
                          \n
                        • Type: string<\/code><\/li>\n
                        • Required: No<\/li>\n<\/ul>\n
                          The parent menu slug; used by nested menus to indicate their parent menu.<\/p>\n
                          search<\/h3>\n
                            \n
                          • Type: string<\/code><\/li>\n
                          • Required: No<\/li>\n<\/ul>\n
                            When hasSearch<\/code> is active and onSearch<\/code> is provided, this controls the value of the search input. Required when the onSearch<\/code> prop is provided.<\/p>\n
                            isEmpty<\/code><\/h3>\n
                              \n
                            • Type: boolean<\/code><\/li>\n
                            • Required: No<\/li>\n<\/ul>\n
                              Indicates whether the menu is empty or not. Used together with the hideIfTargetMenuEmpty<\/code> prop of Navigation Item.<\/p>\n
                              title<\/code><\/h3>\n
                                \n
                              • Type: string<\/code><\/li>\n
                              • Required: No<\/li>\n<\/ul>\n
                                The menu title. It’s also the field used by the menu search function.<\/p>\n
                                titleAction<\/code><\/h3>\n
                                  \n
                                • Type: React.ReactNode<\/code><\/li>\n
                                • Required: No<\/li>\n<\/ul>\n
                                  Use this prop to render additional actions in the menu title.<\/p>\n
                                  Navigation Group Props<\/h2>\n
                                  NavigationGroup<\/code> supports the following props.<\/p>\n
                                  className<\/h3>\n
                                    \n
                                  • Type: string<\/code><\/li>\n
                                  • Required: No<\/li>\n<\/ul>\n
                                    Optional className for the NavigationGroup<\/code> component.<\/p>\n
                                    title<\/code><\/h3>\n
                                      \n
                                    • Type: string<\/code><\/li>\n
                                    • Required: No<\/li>\n<\/ul>\n
                                      The group title.<\/p>\n
                                      Navigation Item Props<\/h2>\n
                                      NavigationItem<\/code> supports the following props.<\/p>\n
                                      badge<\/code><\/h3>\n
                                        \n
                                      • Type: string|Number<\/code><\/li>\n
                                      • Required: No<\/li>\n<\/ul>\n
                                        The item badge content.<\/p>\n
                                        className<\/h3>\n
                                          \n
                                        • Type: string<\/code><\/li>\n
                                        • Required: No<\/li>\n<\/ul>\n
                                          Optional className for the NavigationItem<\/code> component.<\/p>\n
                                          href<\/code><\/h3>\n
                                            \n
                                          • Type: string<\/code><\/li>\n
                                          • Required: No<\/li>\n<\/ul>\n
                                            If provided, renders a<\/code> instead of button<\/code>.<\/p>\n
                                            icon<\/code><\/h3>\n
                                              \n
                                            • Type: React.JSX.Element<\/code><\/li>\n
                                            • Required: No<\/li>\n<\/ul>\n
                                              If no children<\/code> are passed, this prop allows to specify a custom icon for the menu item.<\/p>\n
                                              item<\/code><\/h3>\n
                                                \n
                                              • Type: string<\/code><\/li>\n
                                              • Required: No<\/li>\n<\/ul>\n
                                                The unique identifier of the item.<\/p>\n
                                                navigateToMenu<\/code><\/h3>\n
                                                  \n
                                                • Type: string<\/code><\/li>\n
                                                • Required: No<\/li>\n<\/ul>\n
                                                  The child menu slug. If provided, clicking on the item will navigate to the target menu.<\/p>\n
                                                  hideIfTargetMenuEmpty<\/code><\/h3>\n
                                                    \n
                                                  • Type: boolean<\/code><\/li>\n
                                                  • Required: No<\/li>\n<\/ul>\n
                                                    Indicates whether this item should be hidden if the menu specified in navigateToMenu<\/code> is marked as empty in the isEmpty<\/code> prop. Used together with the isEmpty<\/code> prop of Navigation Menu.<\/p>\n
                                                    onClick<\/code><\/h3>\n
                                                      \n
                                                    • Type: React.MouseEventHandler<\/code><\/li>\n
                                                    • Required: No<\/li>\n<\/ul>\n
                                                      A callback to handle clicking on a menu item.<\/p>\n
                                                      isText<\/code><\/h3>\n
                                                        \n
                                                      • Type: boolean<\/code><\/li>\n
                                                      • Required: No<\/li>\n
                                                      • Default: false<\/li>\n<\/ul>\n
                                                        If set to true then the menu item will only act as a text-only item rather than a button.<\/p>\n
                                                        title<\/code><\/h3>\n
                                                          \n
                                                        • Type: string<\/code><\/li>\n
                                                        • Required: No<\/li>\n<\/ul>\n
                                                          The item title.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134435,"menu_order":189,"template":"","meta":{"footnotes":""},"class_list":["post-134487","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":11,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134487\/revisions"}],"predecessor-version":[{"id":160875,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134487\/revisions\/160875"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134435"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}