{"_id":"@dojo-ng/nav","name":"@dojo-ng/nav","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/nav","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG nav web component","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"dependencies":{"@dojo-ng/dojo-element":"^0.1.0","@dojo-ng/i18n":"^0.1.0","@dojo-ng/slide-pane":"^0.1.1","lit":"^3.3.0"},"_id":"@dojo-ng/nav@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-25VBDJFnQFPUGGx6i0BrEn3rjumxbHE1RYdUGo96tTDioL/2xo+9R4BDjr72AkynJKWZ+DjjCyij1ViBLtRkIQ==","shasum":"17a9cbd52a53adf81f1fe1aeedcfe318dbeb2650","tarball":"https://registry.npmjs.org/@dojo-ng/nav/-/nav-0.1.0.tgz","fileCount":8,"unpackedSize":28594,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC0NktUGmrgYuRY7hhSy2m+dAdt8obMibFYG5fgreWLAQIgQs09lmdwCukpbkg4kGtFdVwKcPai7bgxFCauqPvgj14="}]},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nav_0.1.0_1789001042609_0.4307943310331799"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-10T00:44:02.351Z","0.1.0":"2026-09-10T00:44:02.747Z","modified":"2026-09-10T00:44:02.978Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG nav web component","license":"BSD-3-Clause","readme":"# @dojo-ng/nav\n\n`<dj-nav>` — A nav landmark that collapses into a trigger + panel below a threshold.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nA nav landmark that collapses into a trigger + panel below a threshold. The threshold is the `--dj-nav-collapsed` custom property (0 or 1), read via `TokenFlagController` rather than a `breakpoint` prop, so it lives in the existing `--dj-*` theme system and is container-aware: a nav inside a narrow sidebar on a wide screen collapses. One arrangement is ever in the DOM — never both, hidden: the plain `<nav>` when expanded, or the trigger plus (while open) a panel wrapping that same `<nav>` when collapsed. `panel` picks the collapsed presentation: `\"drawer\"` composes `<dj-slide-pane>` (its `align` follows the reading direction); `\"dropdown\"` and `\"overlay\"` are positioned in this component's own shadow DOM. This is a disclosure, not a menu button — the links are plain slotted `<a>` elements in a `<nav>`, never `dj-list`/`dj-tree`, and the trigger carries no `aria-haspopup`.\n\n> Also called a hamburger menu or navicon, and this is how you'd build responsive navigation with it — none of those words are in the API, because a permanent desktop hamburger is a first-class use here, not a mobile-only special case. The links are plain `<a>` elements in a `<nav>`, never `dj-list`/`dj-tree` — this is a disclosure (APG terms), not a menu, so the trigger deliberately carries no `aria-haspopup`. `refresh()` exists because `ResizeObserver` only sees size changes: call it after a runtime pin, a theme switch, or a viewport media query crossing while the host's own width is unchanged — there is no cross-component theme-change watching built in, by design. Toolbar-style overflow (show what fits, collapse the rest into a menu) is a related but separate component, not this one.\n\n## Install\n\n```bash\nnpm install @dojo-ng/nav\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\nThe default slot is plain `<a>` elements inside a `<nav>` landmark. Below the `--dj-nav-collapsed` threshold (`45rem` by default) it swaps to a trigger button plus a `panel` (`drawer` by default) containing the same links — one arrangement is ever in the DOM, so resizing never duplicates the link set. Give it a `label` for the landmark.\n\n```html\n<dj-nav label=\"Site\">\n  <a href=\"/docs\">Docs</a>\n  <a href=\"/blog\">Blog</a>\n  <a href=\"/pricing\">Pricing</a>\n  <a href=\"/about\">About</a>\n</dj-nav>\n```\n\n## Properties\n\n`↻` marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.\n\n| Property | Attribute | Type | Default |\n|---|---|---|---|\n| `label` | label | `string` | — |\n| `open` | open ↻ | `boolean` | `false` |\n| `panel` | panel ↻ | `\"drawer\" \\| \"dropdown\" \\| \"overlay\"` | `\"drawer\"` |\n| `triggerLabel` | trigger-label | `string` | — |\n| `collapsed` | collapsed ↻ | `boolean` | `false` |\n\n**Slots:** default (the links — plain `<a>` elements), `trigger`\n\n**Parts:** `trigger`, `panel`, `nav`\n\n**Events:** `dj-nav-collapse` (detail `{ collapsed }`), `dj-nav-toggle` (detail `{ open }`)\n\n**Methods:** `show()`, `hide()`, `toggle()`, `refresh()` (Delegates to `TokenFlagController` — the escape hatch for a runtime pin or theme switch that `ResizeObserver` cannot see (it only sees size changes).)\n\n**CSS properties:** `--dj-nav-collapsed` (default `1`; The threshold flag read by TokenFlagController; 0 keeps the inline arrangement, 1 collapses it. Any value a consumer sets (directly, inherited from `:root`, or from their own `@container`/`@media` rule) wins over the component's own 45rem default — set it directly for a permanent hamburger, set both branches to move the flip point, or set it to `initial` to release an inherited pin.), `--dj-nav-gap` (default `1rem`; Gap between links in the inline arrangement.), `--dj-slide-pane-size` (Passed through to the drawer presentation.)\n\n## Examples\n\n### Permanent hamburger\n\nPin the token directly for a nav that is always collapsed, on any screen — no JS, no special case in the component: it is the same threshold token an app can set on a single instance.\n\n```html\n<dj-nav label=\"Site\" style=\"--dj-nav-collapsed: 1\">\n  <a href=\"/docs\">Docs</a>\n  <a href=\"/blog\">Blog</a>\n</dj-nav>\n```\n\n### Moving the threshold\n\n`45rem` is a default, not a hardcoded number. Override it per instance with your own `@container` query on an ancestor that establishes `container-type` — set BOTH branches (the default below your threshold, `0` above it), since setting the token at all replaces the component's own rule entirely rather than adjusting it.\n\n```html\n<style>\n  #wide-nav { container-type: inline-size; }\n  #wide-nav dj-nav { --dj-nav-collapsed: 1; }\n  @container (min-width: 30rem) {\n    #wide-nav dj-nav { --dj-nav-collapsed: 0; }\n  }\n</style>\n<div id=\"wide-nav\">\n  <dj-nav label=\"Site\">\n    <a href=\"/docs\">Docs</a>\n    <a href=\"/blog\">Blog</a>\n  </dj-nav>\n</div>\n```\n\n## Theming\n\nStyled with Dojo NG `--dj-*` design tokens and exposes `::part()` hooks for targeted overrides.\n\n## Accessibility and i18n\n\nFollows the project's WCAG 2.2 AA and localization conventions.\n\n## More\n\nLive, interactive examples are at [play.dojo-ng.com](https://play.dojo-ng.com). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md","_rev":"1-876248949d98ce9f9454df09c4253b5a"}