# nav-menus

> Simple, interactive drop-down and mobile navigation menus.

Latest version **1.0.5** (published 2021-04-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install nav-menus
pnpm add nav-menus
yarn add nav-menus
bun add nav-menus
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-04-01 |
| First published | 2021-03-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shea Cronin |
| Maintainers | sheacronin |

## Links

- npm: https://www.npmjs.com/package/nav-menus
- Repository: https://github.com/sheacronin/nav-menus
- Homepage: https://github.com/sheacronin/nav-menus#readme
- Issues: https://github.com/sheacronin/nav-menus/issues
- npm.io page: https://npm.io/package/nav-menus

## Dependencies (2)

- [css-loader](https://npm.io/package/css-loader.md) ^5.2.0
- [style-loader](https://npm.io/package/style-loader.md) ^2.0.0

## Recent versions

- 1.0.5 (latest) — 2021-04-01
- 1.0.4 — 2021-03-30
- 1.0.3 — 2021-03-30
- 1.0.2 — 2021-03-30
- 1.0.1 — 2021-03-30
- 1.0.0 — 2021-03-30

## README

# Nav Menus

Simple, interactive drop-down and mobile navigation menus.

## Usage

### Installation

Install the npm package in the command line:

```bash
npm install nav-menus
```

Webpack should be configured to use `css-loader` and `style-loader`.

### Your HTML

Use the following class names for elements you wish to include in your navigation menus.

#### Drop-Down Menus

```html
<div class="menu">
    <button class="menu-title">Drop-Down Links</button>
    <ul>
        <li class="menu-item"><a href="#">Item 1</a></li>
        <li class="menu-item"><a href="#">Item 2</a></li>
        <li class="menu-item"><a href="#">Item 3</a></li>
    </ul>
</div>
```

#### Mobile Menus

Follow the same semantic structure as the drop-down menus, except asign the parent div the `.mobile-menu` class instead of the `.menu` class.

```html
<div class="mobile-menu">
    <button class="menu-title">Mobile Links</button>
    <ul>
        <li class="menu-item"><a href="#">Item 1</a></li>
        <li class="menu-item"><a href="#">Item 2</a></li>
        <li class="menu-item"><a href="#">Item 3</a></li>
    </ul>
</div>
```

The suggested tag of the parent element with the `.menu` class should be `nav` or `div`, or `footer`, `nav`, or `div` for a parent element with the `.mobile-menu` class.

### Your JavaScript

Import and run the `createMenus` function in JavaScript.

```javascript
import { createMenus } from 'nav-menus';
createMenus();
```

#### createMenus

`createMenus` takes two optional parameters: **baseColor** and **colorMode**.

##### baseColor

Assigns the base color of your nav menus. Can be changed to any valid color value. Default value is <span style="color:#ddbbff">#ddbbff</span>.

##### colorMode

Styles the menu items based on the **baseColor**. Accepts a value of either `'monochrome'` or `'hues'`. Default value is `'hues'`.

##### Example

```javascript
createMenus('lightblue', 'monochrome');
```

---
_Source: https://npm.io/package/nav-menus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._