Framework for creating accessible navbars.
Last updated 3 years ago by hf0317 .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install simple-accessible-nav 
SYNC missed versions from official npm registry.


simple-accessible-nav is a package for quickly creating a React navbar that conforms to W3 Aria guidelines for accessibility -- specifically relating to navigation. For now, this means it produces "mega menus", which are the only form of dropdown considered truly accessible.

What makes this special?

The navigation demanded by people with severe disabilities is not the same navigation an abled user employs when lazily typing with one hand, or simply trying to avoid using the mouse. A disabled user may be fumbling keys due to severely hampered motor functioning, twitching, shaking, etc. For blind users using text-to-speech translation, it is a great inconvenience for menus to respond in certain ways (e.g. reading the contents when passing by). The navigation methods these users like to use are also more complex than simply "tabbing through" a page.

These specifications are outlined here: aria specifications

simple-accessible-nav incorporates these desires. It assures 'text-to-speech' devices are given the proper information and assists in establishing optionality if users do not possess the ability to visualize the options.


  1. simple-accessible-nav is a prototype and, as of now, highly opinionated. It requires react-router-dom to function properly, though it should work with other routers that have similar APIs (untested).
  2. The submenus are intended to produce only mega menus and not a singular dropdown list. This is because accessibility studies show that dropdowns in navs are disruptive and the relatively small amount of information contained should be presented in a different way. However, large amounts of information in mega menus does aid in navigation. This is also becoming a best practice for navbars in general as companies seek to "streamline" the navigation, where dropdowns incentivize poorly structured interfaces.


From command line:

$ npm install simple-accessible-nav react-router-dom --save


$ yarn add simple-accessible-nav 

Adding to project

Import Nav from simple-accessible-nav into the project as well as a BrowserRouter from react-routers-dom.

import React, { Component } from 'react';
import Nav from 'simple-accessible-nav';
import {BrowserRouter as Router } from 'react-router-dom';

Wrap the Nav in the Router within the App class. The Nav component requires items and type props.

class App extends Component {
  render() {
    return (
      <div className="App">
          <Nav items={[{link: {to: 'home', label: 'Home'}}]} type={'basic'} shadow/>
          <Route exact path={"/"} component={Home} />

Populating items

The items prop takes an array of Javascript Objects. Even a single Object should be in an array.

Item Objects

Item Arguments Description
link to, label A react-router-dom link to a page '/{label}'
submenu label, items A dropdown. Contains sections.
section label, items A list of links to be within a submenu


// a single link to /home
let link = [
  {link: {label: 'Home', to: 'home' }}

// a submenu with sections (=== mega menu)
let menu = [
  {submenu: {label: 'menu', items: [
    {section: {label: 'products', items: [
      {link: {label: 'product1', to: 'product_1'}},
      {link: {label: 'product2', to: 'product_2'}},
      {link: {label: 'product3', to: 'product_3'}},
      {link: {label: 'product4', to: 'product_4'}},
      {link: {label: 'product5', to: 'product_5'}}
    {section: {label: 'services', items: [
      {link: {label: 'service1', to: 'service_1'}},
      {link: {label: 'service2', to: 'service_2'}},
      {link: {label: 'service3', to: 'service_3'}},
      {link: {label: 'service4', to: 'service_4'}},
      {link: {label: 'service5', to: 'service_5'}}

Other nav components

Item Arguments Description
type string One of several styles
logo string the name of a logo asset, e.g. 'logo.png'
phone Object e.g. {cell: '555-555-5555'}
shadow if a dropshadow should be applied
variation Will produce a variation of the navbar style
socialAccounts Object e.g. {facebook: "yourname", github: "username"", ...}


  1. basic (a single navbar)
  2. stacked (double layered two toned)
  3. centered (double layered menu in center)


  1. cell
  2. mobile
  3. home
  4. business

Social accounts need only the username as the link to profiles will be automatically populated


  1. facebook
  2. googleplus
  3. youtube
  4. linkedIn
  5. slack
  6. bandcamp
  7. etsy
  8. pinterest

Current Tags

  • 0.1.6                                ...           latest (3 years ago)

7 Versions

  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependents (0)

Copyright 2014 - 2017 © |