# @evergreen-wc/eve-navigation

> Navigation web component made with lit element

Latest version **0.1.1** (published 2021-05-23) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @evergreen-wc/eve-navigation
pnpm add @evergreen-wc/eve-navigation
yarn add @evergreen-wc/eve-navigation
bun add @evergreen-wc/eve-navigation
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-05-23 |
| First published | 2018-12-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Grant Hutchinson |
| Maintainers | hutchgrant |

## Links

- npm: https://www.npmjs.com/package/@evergreen-wc/eve-navigation
- Repository: https://github.com/hutchgrant/evergreen-web-components
- Homepage: https://github.com/hutchgrant/evergreen-web-components#readme
- Issues: https://github.com/hutchgrant/evergreen-web-components/issues
- npm.io page: https://npm.io/package/@evergreen-wc/eve-navigation

## Dependencies (1)

- [lit](https://npm.io/package/lit.md) ^2.0.0-rc.2

## Recent versions

- 0.1.1 (latest) — 2021-05-23
- 0.1.0 — 2021-05-22
- 0.0.10 — 2020-06-08
- 0.0.9 — 2019-07-02
- 0.0.7 — 2019-02-09
- 0.0.6 — 2019-01-15
- 0.0.5 — 2019-01-07
- 0.0.4 — 2018-12-31
- 0.0.3 — 2018-12-27
- 0.0.2 — 2018-12-27
- 0.0.1 — 2018-12-27

## README

# eve-dropdown

An Evergreen Navigation Web Component

[Demo](https://hutchgrant.github.io/evergreen-web-components/docs/navigation)

### Install

```bash
npm i @evergreen-wc/eve-navigation
```

### Usage

```js
import { html, LitElement } from 'lit';
import '@evergreen-wc/eve-navigation';

const menu = [
  { label: 'Home', to: '/' },
  { label: 'Blog', to: '/blog' },
  { label: 'Portfolio', to: '/portfolio',
    dropdown: [
      { label: 'dropdown item 1', to: '/demos1' },
      { label: 'dropdown item 2', to: '/demos2' }
    ]
  },
  { label: 'Photos', to: '/photos' },
  { label: 'Contact', to: '/contact' }
];

class MyComponent extends LitElement {
  render() {
    return html`
      <eve-navigation brand="My Website" .menu=${menu} fluid></eve-navigation>
    `;
  }
}
customElements.define('my-component', MyComponent);
```

### Props

| Property | Description |
| -------- | ----------- |
| brand    | Main Brand name displayed and linked for the feature application |
| menu     | Main navigation menu array. Each item is an object which contains a label and to(url) keys. First index is default brand link. |
| fluid   | Set container width to 100% of all devices. Otherwise, container width is preset to responsive breakpoints >=1200px, >=992px, >=768px, >=576px, <576px and centered on page |
| fixed   | Set navigation position to fixed at top. |

### Styling

```css
--primary-color: green;
--secondary-color: #fff;
--nav-background: var(--primary-color);
--nav-brand-text-size: 18px;
--nav-brand-text-color: var(--secondary-color);
--nav-menu-text-color: var(--secondary-color);
--nav-menu-text-size:18px;
--nav-menu-text-hover-color: var(--primary-color);
--nav-menu-text-hover-background: var(--secondary-color);
--nav-menu-drop-hover-background: color(green tint(25%));
```

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