Nephrite Power Mace

    @devtools-ds/navigation
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    @devtools-ds/navigation

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

    Installation

    npm i @devtools-ds/nav
    # or with yarn
    yarn add @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. For the tabs we use @reach/tabs to set up the correct attributes and keyboard interaction.

    Usage

    import { Navigation } from "@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):


    Adam Dierkens

    💻 📖 🎨

    Tyler Krupicka

    📖 💻 💡 ⚠️

    Andrew Lisowski

    💡 💻

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Keywords

    none

    Install

    npm i @devtools-ds/navigation

    DownloadsWeekly Downloads

    46

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    20

    Last publish

    Collaborators

    • tylerkrupicka