# xtal-side-nav

> Side nav (drawer) web component.

Latest version **0.0.118** (published 2024-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install xtal-side-nav
pnpm add xtal-side-nav
yarn add xtal-side-nav
bun add xtal-side-nav
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.118 |
| Published | 2024-02-28 |
| First published | 2019-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements, menu, drawer |

## Links

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

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.138
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.69
- [be-importing](https://npm.io/package/be-importing.md) 0.0.78
- [xtal-element](https://npm.io/package/xtal-element.md) 0.0.598

## Recent versions

- 0.0.118 (latest) — 2024-02-28
- 0.0.117 — 2024-02-15
- 0.0.116 — 2024-01-15
- 0.0.115 — 2024-01-13
- 0.0.114 — 2023-07-17
- 0.0.113 — 2023-06-26
- 0.0.112 — 2023-06-18
- 0.0.111 — 2023-01-06
- 0.0.110 — 2023-01-01
- 0.0.109 — 2023-01-01
- 0.0.108 — 2022-12-31
- 0.0.107 — 2022-12-30
- 0.0.106 — 2022-12-29
- 0.0.105 — 2022-12-28
- 0.0.104 — 2022-12-28
- … 103 more at https://npm.io/package/xtal-side-nav/versions

## README

# xtal-side-nav

Side nav (drawer) web component.

xtal-side-nav is an out-of-the-box SSR web component.

## [API](https://cf-sw.bahrus.workers.dev/?href=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fxtal-side-nav%400.0.69%2Fcustom-elements.json&stylesheet=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Fsimple-ce-style.css&embedded=false&tags=&ts=2022-03-12T17%3A17%3A28.479Z&tocXSLT=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Ftoc.xsl)

## Ways to reference

### Using npm modules

```html
<xtal-side-nav be-importing=xtal-side-nav/>
    <section style='color:white'>
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
    </section>
</xtal-side-nav>
<script type=importmap>{
    "imports":{
        "be-active/": "../node_modules/be-active/",
        "be-based/": "../node_modules/be-based/",
        "be-enhanced/": "../node_modules/be-enhanced/",
        "be-definitive/": "../node_modules/be-definitive/",
        "be-exportable/": "../node_modules/be-exportable/",
        "be-hive/": "../node_modules/be-hive/",
        "be-importing/": "../node_modules/be-importing/",
        "be-it/": "../node_modules/be-it/",
        "be-linked/": "../node_modules/be-linked/",
        "be-propagating/": "../node_modules/be-propagating/",
        "be-written/": "../node_modules/be-written/",
        "stream-orator/": "../node_modules/stream-orator/",
        "trans-render/": "../node_modules/trans-render/",
        "xtal-element/": "../node_modules/xtal-element/",
        "xtal-side-nav/": "../node_modules/xtal-side-nav/"
    }
}</script>
<script type=module>
    import 'be-importing/be-importing.js';
</script>
```

Note that we can give any name we want to the custom element, it doesn't have to match the default name specified by the html file!

### Using CDN:

```html
<xtal-side-nav be-importing=xtal-side-nav/>
    <section style='color:white'>
        <div>Menu Item 1</div>
        <div>Menu Item 2</div>
    </section>
</xtal-side-nav>
<div id=target></div>
<script type=importmap>{
    "imports":{
        "xtal-side-nav/": "https://cdn.jsdelivr.net/npm/xtal-side-nav@0.0.112/"
    }
}</script>
<script type=module>
    import 'https://esm.run/be-importing@0.0.61';
</script>
```

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