# @iampava-devtools-ds/navigation

> A navigation bar with tabs and icons, based on the tab navigation in browser inspectors.

Latest version **1.2.5** (published 2023-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @iampava-devtools-ds/navigation
pnpm add @iampava-devtools-ds/navigation
yarn add @iampava-devtools-ds/navigation
bun add @iampava-devtools-ds/navigation
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2023-09-21 |
| First published | 2023-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 76.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 272 |
| Author | Adam Dierkens Adam_Dierkens@intuit.com |
| Maintainers | iampava |

## Links

- npm: https://www.npmjs.com/package/@iampava-devtools-ds/navigation
- Repository: https://github.com/intuit/devtools-ds
- Homepage: https://github.com/intuit/devtools-ds#readme
- Issues: https://github.com/intuit/devtools-ds/issues
- npm.io page: https://npm.io/package/@iampava-devtools-ds/navigation

## Dependencies (5)

- [clsx](https://npm.io/package/clsx.md) 1.1.0
- [@reach/tabs](https://npm.io/package/@reach/tabs.md) 0.12.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) 7.7.2
- [@design-systems/utils](https://npm.io/package/@design-systems/utils.md) 2.12.0
- [@iampava-devtools-ds/themes](https://npm.io/package/@iampava-devtools-ds/themes.md) ^1.2.5

## Recent versions

- 1.2.5 (latest) — 2023-09-21
- 1.2.3 — 2023-09-21
- 1.2.3-alpha.0 — 2023-09-21
- 1.2.2-alpha.0 — 2023-09-21

## README

# @iampava-devtools-ds/navigation

A navigation bar with tabs and icons, based on the tab navigation in browser inspectors.

## Installation

```sh
npm i @iampava-devtools-ds/nav
# or with yarn
yarn add @iampava-devtools-ds/nav
```

## Accessibility Approach

This component is a combination of a few user interaction patterns. At it's core, the `Navigation` is a top-level navigation for the current page. Inside of that, it contains `Tabs` that follow the [WAI-ARIA TabPanel Specification](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel). For the tabs we use [@reach/tabs](https://reach.tech/tabs/#tabs-keyboardactivation) to set up the correct attributes and keyboard interaction.

## Usage

```js
import { Navigation } from "@iampava-devtools-ds/navigation";

export const BasicUsage = () => {
  return (
    <Navigation>
      <Navigation.Controls>
        <Navigation.Left>
          <Navigation.Button
            icon={<SelectIcon inline />}
            aria-label="Inspect page"
          />
          <Navigation.Divider />
        </Navigation.Left>
        <Navigation.TabList>
          <Navigation.Tab id="elements" icon={<InspectorIcon inline />}>
            Elements
          </Navigation.Tab>
          <Navigation.Tab id="console" icon={<ConsoleIcon inline />}>
            Console
          </Navigation.Tab>
          <Navigation.Tab id="debugger" icon={<DebuggerIcon inline />}>
            Debugger
          </Navigation.Tab>
          <Navigation.Tab id="styles" icon={<StylesIcon inline />}>
            Style Editor
          </Navigation.Tab>
          <Navigation.Tab id="performance" icon={<OdometerIcon inline />}>
            Performance
          </Navigation.Tab>
          <Navigation.Tab id="memory" icon={<MemoryIcon inline />}>
            Memory
          </Navigation.Tab>
        </Navigation.TabList>

        <Navigation.Right>
          <Navigation.Button
            icon={<NewWindowIcon inline />}
            aria-label="New Window"
          />

          <Navigation.Divider />
          <Navigation.Button
            icon={<MoreInfoIcon inline />}
            aria-label="More settings"
          />
          <Navigation.Button
            icon={<CloseIcon inline />}
            aria-label="Close panel"
          />
        </Navigation.Right>
      </Navigation.Controls>
      <Navigation.Panels>
        <Navigation.Panel>Elements</Navigation.Panel>
        <Navigation.Panel>Console</Navigation.Panel>
        <Navigation.Panel>Debugger</Navigation.Panel>
        <Navigation.Panel>Styles</Navigation.Panel>
        <Navigation.Panel>Performance</Navigation.Panel>
        <Navigation.Panel>Memory</Navigation.Panel>
      </Navigation.Panels>
    </Navigation>
  );
};
```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/adierkens"><img src="https://avatars.githubusercontent.com/u/13004162?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adam Dierkens</b></sub></a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=adierkens" title="Code">💻</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=adierkens" title="Documentation">📖</a> <a href="#design-adierkens" title="Design">🎨</a></td>
    <td align="center"><a href="http://tylerkrupicka.com/"><img src="https://avatars.githubusercontent.com/u/5761061?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tyler Krupicka</b></sub></a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Documentation">📖</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Code">💻</a> <a href="#example-tylerkrupicka" title="Examples">💡</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Tests">⚠️</a></td>
    <td align="center"><a href="http://hipstersmoothie.com/"><img src="https://avatars.githubusercontent.com/u/1192452?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href="#example-hipstersmoothie" title="Examples">💡</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=hipstersmoothie" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/@iampava-devtools-ds/navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._