{"id":27118592,"url":"https://github.com/doga/lume_navbardata","last_synced_at":"2026-04-19T02:06:21.759Z","repository":{"id":64956505,"uuid":"579842248","full_name":"doga/lume_navbardata","owner":"doga","description":"A Lume plugin for generating navigation bars in multi-language websites.","archived":false,"fork":false,"pushed_at":"2024-01-06T05:27:44.000Z","size":32,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-12T22:07:03.635Z","etag":null,"topics":["deno","i18n","l10n","lume","webdevelopment"],"latest_commit_sha":null,"homepage":"https://deno.land/x/lume_navbardata","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doga.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,"zenodo":null}},"created_at":"2022-12-19T04:10:38.000Z","updated_at":"2023-03-03T22:36:49.000Z","dependencies_parsed_at":"2024-01-06T06:46:54.268Z","dependency_job_id":"8e231d0d-79a0-47ef-87a8-bbe708f9e635","html_url":"https://github.com/doga/lume_navbardata","commit_stats":{"total_commits":12,"total_committers":1,"mean_commits":12.0,"dds":0.0,"last_synced_commit":"f97f42032ac5daae88312910652b1311982fe700"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/doga/lume_navbardata","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doga%2Flume_navbardata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doga%2Flume_navbardata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doga%2Flume_navbardata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doga%2Flume_navbardata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doga","download_url":"https://codeload.github.com/doga/lume_navbardata/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doga%2Flume_navbardata/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266420811,"owners_count":23925993,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["deno","i18n","l10n","lume","webdevelopment"],"created_at":"2025-04-07T07:58:57.042Z","updated_at":"2026-04-19T02:06:21.715Z","avatar_url":"https://github.com/doga.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lume_navbardata\n\nA [Lume](https://lume.land) plugin for developing multi-language websites.\nLume is a static-site generator for the [Deno](https://deno.land) JavaScript/TypeScript runtime.\n\nlume_navbardata creates [shared data for Lume projects](https://lume.land/docs/creating-pages/shared-data/#the-_data-directories) in order to automate the generation of visual navigation bars. These navigation bars are frequently displayed on top of web pages as a set of links.\n\n## Usage\n\nCall lume_navbardata from your [Lume project's configuration file](https://lume.land/docs/configuration/config-file/):\n\n```ts\n// _config.ts\n\nimport lume from 'lume/mod.ts';\nimport lume_navbardata from 'lume_navbardata/mod.ts';\n\nexport default\nlume({\n  location: new URL('https://site.example'),\n  src     : './src',\n  dest    : './build',\n})\n.use(lume_navbardata());\n```\n\nIn your lume project's `deno.json` file, don't forget to define the `lume_navbardata` import, and also the compiler option that `lume_langdata` depends on:\n\n```json\n{\n  \"imports\": {\n    \"lume/\"         : \"https://deno.land/x/lume@v2.0.2/\",\n    \"lume_langdata\"  : \"https://deno.land/x/lume_langdata@v2.0.4/mod.ts\",\n  },\n  \"compilerOptions\": {\n    \"types\": [\n      \"lume/types.ts\"\n    ]\n  }\n}\n```\n\n`lume_navbardata@v2.x.x` versions are compatible with `lume@v2.x.x`.\n\n## Lume project directory structure\n\nlume_navbardata assumes that your [Lume project's source directory](https://lume.land/docs/configuration/config-file/#src) contains one directory per language. The directory name must be a [ISO 639-1 language code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). lume_navbardata will ignore directories with a non-conforming name. Note that the names of the language directories must be lower-cased.\n\nFor example, if your source directory contains the following directories and files:\n\n- `en`\n- `tr`\n- `assets`\n- `index.html`\n\nthen lume_navbardata will ignore the `assets` directory and the `index.html` file.\n\nWithin a language directory, lume_navbardata assumes that each link in the navigation bar corresponds to a [page](https://lume.land/docs/creating-pages/page-files/) in the language directory. lume_navbardata will only consider pages:\n\n- that have the `.yaml`, `.yml`, `.md`, `.vto`, `.vento` or `.njk` filename extensions, and\n- whose [front matter](https://lume.land/docs/getting-started/page-data/) contains a `nav.order` entry which is an integer or floating point number that defines the display order in the navigation bar.\n\nFor example, if the `en` directory contains these pages:\n\n- `documentation.yaml`\n- `about.njk`\n- `bug-fix-b2345.yaml`\n\nand if only `documentation.yaml` and `about.njk` have `nav.order` in their front matter, then the `bug-fix-b2345.yaml` page will be ignored by lume_navbardata.\n\nExample of valid front matter:\n\n```yaml\nnav:\n  order: 1\n```\n\n## Which shared data is generated?\n\nGiven the source directory structure shown above, lume_navbardata will generate the following data files:\n\n- `en/_data/navbar.yaml`\n- `tr/_data/navbar.yaml`\n\nFor example, `en/_data/navbar.yaml` will be similar to this:\n\n```yaml\nlist:\n- title: Documentation\n  path: documentation\n  order: 1\n- title: About\n  path: about\n  order: 2\n```\n\nNote that:\n\n- in these data files both the title and the path are inferred from the page's filename.\n- the generated data files will modify your source directory.\n\n## Using navbar data in Lume layouts\n\nHere is how the navbar data can be used in [Lume layouts](https://lume.land/docs/getting-started/create-a-layout/) for generating navigation bars:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"{{ lang.code }}\"\u003e\n\u003chead\u003e\n  \u003c!-- ... --\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cheader\u003e\n    \u003cnav\u003e\n      \u003cul\u003e\n        \u003cli\u003e\n          \u003ca href=\"/{{ lang.code }}/\" aria-label=\"Return home\"\u003e\n            Site name\n          \u003c/a\u003e\n        \u003c/li\u003e\n\n        {% for item in navbar.list %}\n        \u003cli\u003e\n          \u003ca \n            href=\"/{{ lang.code }}/{{ item.path }}/\"\n\n            {% if nav.selection == item.path %}\n            class=\"selected\"\n            {% endif %}\n          \u003e\n            {{ item.title }}\n          \u003c/a\u003e\n        \u003c/li\u003e\n        {% endfor %}\n\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  \u003c/header\u003e\n\n  \u003c!-- ... --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nNote that:\n\n- pages can indicate their path in their front matter (here in the `nav.selection` property) so that the current item in the navigation bar can be highlighted.\n- if you wish to select the same navigation bar item for several pages then all these pages should have the same `nav.selection` value; for example `src/docs.yaml` and `src/specification.yaml` can both have the same `nav.selection` value which equals to `docs`, but only one of them must have a `nav.order` property and only a link to that page (for example `src/docs.yaml`) will be displayed in the navigation bar.\n- in this example `lang.code` isn't generated by lume_navbardata but by another Lume plugin called [lume_langdata](https://github.com/doga/lume_langdata)).\n\n## Other relevant Lume add-ons\n\nIf you are developing multi-language sites, the following Lume plugin is a nice complement to lume_navbardata:\n\n- [lume_langdata](https://deno.land/x/lume_langdata)\n\n## Demo\n\n[This website project](https://github.com/doga/qworum-website) uses Lume and lume_navbardata.\n\n## License\n\nlume_navbardata is released under the [Apache 2.0 License](https://www.apache.org/licenses/LICENSE-2.0).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoga%2Flume_navbardata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoga%2Flume_navbardata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoga%2Flume_navbardata/lists"}