{"id":19499508,"url":"https://github.com/stackbit/gatsby-plugin-menus","last_synced_at":"2025-07-19T16:39:40.343Z","repository":{"id":57162341,"uuid":"163874903","full_name":"stackbit/gatsby-plugin-menus","owner":"stackbit","description":"Gatsby plugin for site menus","archived":false,"fork":false,"pushed_at":"2023-06-10T00:58:04.000Z","size":443,"stargazers_count":9,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-14T02:48:48.724Z","etag":null,"topics":["gatsby","plugin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stackbit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-02T18:22:30.000Z","updated_at":"2020-04-09T08:25:49.000Z","dependencies_parsed_at":"2024-06-19T04:10:42.587Z","dependency_job_id":"40c617e4-3f67-418f-9d18-2a35b9bc29d2","html_url":"https://github.com/stackbit/gatsby-plugin-menus","commit_stats":{"total_commits":13,"total_committers":5,"mean_commits":2.6,"dds":0.3846153846153846,"last_synced_commit":"9a8f2690709348b80f40feacbd117683616eea26"},"previous_names":["stackbithq/gatsby-plugin-menus"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stackbit/gatsby-plugin-menus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbit%2Fgatsby-plugin-menus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbit%2Fgatsby-plugin-menus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbit%2Fgatsby-plugin-menus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbit%2Fgatsby-plugin-menus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stackbit","download_url":"https://codeload.github.com/stackbit/gatsby-plugin-menus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stackbit%2Fgatsby-plugin-menus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265967039,"owners_count":23857065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","plugin"],"created_at":"2024-11-10T22:04:39.099Z","updated_at":"2025-07-19T16:39:40.251Z","avatar_url":"https://github.com/stackbit.png","language":"JavaScript","readme":"# gatsby-plugin-menus\n\nA simple-to-use menu plugin for [Gatsby](http://gatsbyjs.org) that allows for infinitely nested menus.\n\nComes with built-in support for extracting menus defined in Markdown, but can also be extended to load menus from any source.\n\n## Install\n\n`npm install --save @stackbit/gatsby-plugin-menus`\n\n## How to use\n\n### In your gatsby-config.js\n\n```javascript\n// gatsby-config.js\nplugins: [\n  {\n    resolve: '@stackbit/gatsby-plugin-menus',\n    options: {\n      // static definition of menu items (optional)\n      menus: {\n        main: // identifier of menu container\n          [ // array of contained children menu items\n            {\n              identifier: 'myId', // identifier for this item (optional)\n              title: 'Title for page',\n              url: '/page-1/',\n              weight: 1\n            }\n          ]\n      },\n      // Gatsby node types from which we extract menus (optional, see \"Advanced usage\")\n      sourceNodeType: 'MarkdownRemark', \n      // the relative node path where we can find the 'menus' container (optional)\n      sourceDataPath: 'frontmatter',\n      // the relative node path where we can find the page's URL (required)\n      sourceUrlPath: 'fields.url',\n      // custom menu loading function (optional)\n      menuLoader: customLoaderFunction,\n      // the property to use for injecting to the page context (optional, see \"Advanced usage\")\n      pageContextProperty: 'menus',\n    },\n  },\n],\n```\n\n### In your Markdown pages\n\nBy default, all Markdown pages can define which menus contain them. \n\nSee [Advanced usage](#advanced-usage) to learn how to extract menus from other sources.\n\nThere are several supported ways to add a page to a menu:\n\n- Single menu container:\n\n```yaml\n---\ntitle: Lorem Ipsum\nmenus: main # identifier of menu container\n---\n```\n\n- Multiple menu containers:\n\n```yaml\n---\ntitle: Lorem Ipsum\nmenus: \n  - main\n  - footer\n---\n```\n\n- Overriding menu item values:\n\n```yaml\n---\ntitle: Lorem Ipsum\nmenus:\n  main: \n    identifier: myId # identifier for this item (optional)\n    title: Go to Lorem Ipsum # override title for this item\n    weight: 1\n---\n```\n\n## How to query\n\nA sample GraphQL query to get menus:\n\n```graphql\n{\n  menus {\n    main {\n      identifier\n      title\n      url\n      items {\n        identifier\n        title\n        url\n      }\n    }\n    footer {\n      identifier\n      title\n      url\n    }\n  }\n}\n```\n\nThe field `items` contains the sub-menu items if available. The query should nest to accommodate the maximum hierarchy needed.\n\n\n### Menu order\n\nItems within a menu are first ordered by their defined `weight` (both from static and page menu items). If weights are equal, then menu items defined in the plugin options (static) are placed first by their appearance order, followed by page menu items ordered by their page's creation time (birthTime).\n\n\n## Advanced usage\n\n### Source options\n\nThe plugin defines the following options to customize where menu information is extracted from:\n\n* `sourceNodeType` - The Gatsby node type we want to extract menus from (default: MarkdownRemark)\n\n* `sourceDataPath` - The relative path in the node where we expect to find the `menus` item which contains menu information. In case there is no explicit title defined for the menu item, we attempt to find the default title under `${sourceDataPath}.title`. (default: frontmatter)\n\n* `sourceUrlPath` - The relative path in the node where we expect to find the page's URL. This option is always required.\n\nIf more flexibility is needed for deciding how menus are loaded, a [custom function](#custom-loader) should be defined.\n\n### Custom loader\n\nIt is possible to override the default behavior of extracting menu items from Markdown pages by providing your own custom loader function.\n\n1. Provide custom function in the plugin options:\n\n```javascript\n// gatsby-config.js\nplugins: [\n  {\n    resolve: '@stackbit/gatsby-plugin-menus',\n    options: {\n      ...\n      // custom menu loading function (optional)\n      menuLoader: customLoaderFunction,\n    },\n  },\n],\n```\n\n2. Implement custom loader function:\n\n```javascript\n\ncustomLoaderFunction = (loaderActions) =\u003e {\n    const { getNodesByType, getNode } = loaderActions\n    ...\n    return {\n      main: [\n        {\n          identifier: 'myId', \n          title: 'Title for page',\n          url: '/page-1/',\n          weight: 1,\n          data: {\n            ... // custom data that will be made available via graphql\n          }\n        }\n      ]\n    }\n}\n\n```\n\n### Accessing frontmatter\n\nMenu items created from Markdown pages expose additional information about the page they were generated from. We can use that information to include other information that was defined in the Markdown page's frontmatter.\n\n- Markdown page:\n\n```yaml\n---\ntitle: Lorem Ipsum\nmoreInfo: Additional pieces of information \nmenus: main\n---\n```\n\n- GraphQL query:\n\n```graphql\n{\n  menus {\n    main {\n      identifier\n      title\n      url\n      page {\n        frontmatter {\n          moreInfo\n        }\n      }\n    }\n  }\n}\n```\n\n### Page context\n\nThe plugin can be used to inject the menus structure directly into the context of your Gatsby pages. \n\nTo enable this, set the `pageContextProperty` option:\n```javascript\n// gatsby-config.js\npageContextProperty: 'menus'\n```\n\nAnd the menus will be available in the page's context: \n```javascript\nthis.props.pageContext.menus\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackbit%2Fgatsby-plugin-menus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstackbit%2Fgatsby-plugin-menus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstackbit%2Fgatsby-plugin-menus/lists"}