# react-expandable-nav

> React component for twitch-like navbar layout

Latest version **0.1.19** (published 2015-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-expandable-nav
pnpm add react-expandable-nav
yarn add react-expandable-nav
bun add react-expandable-nav
```

## 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.19 |
| Published | 2015-12-17 |
| First published | 2015-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 38 |
| Author | Vasco Remedios Menezes |
| Maintainers | ctan1345 |
| Keywords | react, twitch, navbar, expandable, react-component |

## Links

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

## Dependencies (1)

- [object-assign](https://npm.io/package/object-assign.md) ^4.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.19 (latest) — 2015-12-17
- 0.1.18 — 2015-12-01
- 0.1.17 — 2015-02-03
- 0.1.16 — 2015-02-03
- 0.1.15 — 2015-02-02
- 0.1.14 — 2015-02-02
- 0.1.13 — 2015-02-02
- 0.1.12 — 2015-02-02
- 0.1.11 — 2015-01-19
- 0.1.10 — 2015-01-17
- 0.1.9 — 2015-01-16
- 0.1.8 — 2015-01-15
- 0.1.7 — 2015-01-15
- 0.1.6 — 2015-01-15
- 0.1.5 — 2015-01-15
- … 4 more at https://npm.io/package/react-expandable-nav/versions

## README

react-expandable-nav
====================
React component for twitch-like navbar layout.

This package is built upon Bootstrap.

## Demo
[http://ctan1345.github.io/react-expandable-nav/](http://ctan1345.github.io/react-expandable-nav/)

## Installation
`npm install [--save] react-expandable-nav`

## Dependenecy
Bootstrap: [http://getbootstrap.com/](http://getbootstrap.com/)

jQuery (for tooltip function): [http://jquery.com/](http://jquery.com/)


## Usage
### Basic
The simplest example requires you to wrap everything inside `<ExpandableNavContainer>` and your contents inside `<ExpandableNavPage>`.
You have to also define the element that is going to be rendered when the navbar expanded and not expanded.

```javascript
  var ExpandableNav = require('react-expandable-nav');

  // Or var ExpandableNavContainer = ExpandableNav.ExpandableNavContainer;
  var {ExpandableNavContainer, ExpandableNavbar, ExpandableNavHeader,
      ExpandableNavMenu, ExpandableNavMenuItem, ExpandableNavPage,
      ExpandableNavToggleButton} = ExpandableNav;

  var App = React.createClass({
    render() {
      var header = {
        small: <span className="logo">R</span>,
        full: <span>React</span>
      };
      var menuItems = {
        small: [<span className="glyphicon glyphicon-home"></span>, <span className="glyphicon glyphicon-user"></span>],
        full: [<span>Home</span>, <span>About us</span>, <span>Contact us</span>]
      };
      return (
        <ExpandableNavContainer>
          <ExpandableNavbar>
            <ExpandableNavHeader small={header.small} full={header.full} />
            <ExpandableNavMenu>
              <ExpandableNavMenuItem small={menuItems.small[0]} full={menuItems.full[0]} url='/home/' />
              <ExpandableNavMenuItem small={menuItems.small[1]} full={menuItems.full[1]} url='/about/' />
            </ExpandableNavMenu>
          </ExpandableNavbar>
          <ExpandableNavToggleButton />
          <ExpandableNavPage>
            <p>Hello world</p>
          </ExpandableNavPage>
        </ExpandableNavContainer>
      );
    }
  });

```
### Advanced usage
You can substitute the default toggle button with your own:
```javascript
  <ExpandableNavToggleButton small={<span>open</span>} full={<span>close</span>}/>
```

You can control the width of the navbar by specifying `fullWidth` and `smallWidth` attribute on `ExpandableNavbar`:
```javascript
  <ExpandableNavContainer>
    <ExpandableNavbar fullWidth={300} smallWidth={60}>
      ...
    </ExpandableNavbar>
  </ExpandableNavContainer>
```

If you do that, you probably want to change the style as well.
To do that, you can provide inline style.
```javascript
  var navPageStyle = {
    full: {paddingLeft: 200},
    small: {paddingLeft: 30}
  };
  var navHeaderStyle = {
    full: {paddingLeft: 10},
    small: {paddingLeft: 5}
  };
  <ExpandableNavContainer>
    <ExpandableNavbar>
      <ExpandableNavHeader small={header.small} full={header.full} fullStyle={navHeaderStyle.full} smallStyle={navHeaderStyle.small} />
      ...
    </ExpandableNavbar>
    <ExpandableNavPage fullStyle={navPageStyle.full} smallStyle={navPageStyle.small}>
      ...
    </ExpandableNavPage>
  </ExpandableNavContainer>
```

Alternatively, you can specify the class and use CSS to set the style.
```javascript
  <ExpandableNavContainer>
    <ExpandableNavbar fullClass={"full"} smallClass={"small"}>
      ...
    </ExpandableNavbar>
    <ExpandableNavPage fullClass={'full'} smallClass={'small'}>
      ...
    </ExpandableNavPage>
  </ExpandableNavContainer>
```

You can control the initial active URL by providing active={true} attribute on `<ExpandableNavMenuItem>`.
```javascript
  <ExpandableNavMenu>
    <ExpandableNavMenuItem small={menuItems.small[0]} full={menuItems.full[0]} url='/home/' />
    <ExpandableNavMenuItem small={menuItems.small[1]} full={menuItems.full[1]} url='/about/' active={false} />

    // This element will have 'active' class when ExpandableNav is first rendered
    <ExpandableNavMenuItem small={menuItems.small[2]} full={menuItems.full[2]} url='/contact/' active={true} />
  </ExpandableNavMenu>
```


### Tooltip
To use this function, you need to include jQuery and Bootstrap in your application.
Firstly you have to trigger the tooltip by calling `$('[data-toggle="menuitem-tooltip"]').tooltip()`.
Then you have to provide jQuery dependency to `ExpandableNavMenuItem` by passing `jquery={$}`.
Assume jQuery is available globally, you can something like this:
```javascript
var App = React.createClass({
  componentDidMount() {
    $('[data-toggle="menuitem-tooltip"]').tooltip();
  },
  render() {
    <ExpandableNavContainer>
      ...
      <ExpandableNavMenu>
        <ExpandableNavMenuItem small={menuItemsSmall[0]} full={menuItemsFull[0]} tooltip={"Home"} jquery={window.$} />
        ...
      </ExpandableNavMenu>
    </ExpandableNavContainer>
  }
});
```


## Development

### Run example
```shell
  npm install
  npm start
  open localhost:3000
```

### Watcher
```shell
  grunt watch
```

## Testing
```shell
  grunt test
```

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