# @globsecure/glob-navbar

> Bootstrap navbar component for React

Latest version **1.0.3** (published 2016-01-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @globsecure/glob-navbar
pnpm add @globsecure/glob-navbar
yarn add @globsecure/glob-navbar
bun add @globsecure/glob-navbar
```

## 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.3 |
| Published | 2016-01-21 |
| First published | 2016-01-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | William Reis Fernandes |
| Maintainers | globsecure |
| Keywords | nav, navbar, bootstrap, react, es6 |

## Links

- npm: https://www.npmjs.com/package/@globsecure/glob-navbar
- Repository: https://github.com/globsecure/glob-navbar
- Homepage: https://github.com/globsecure/glob-navbar#readme
- Issues: https://github.com/globsecure/glob-navbar/issues
- npm.io page: https://npm.io/package/@globsecure/glob-navbar

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^0.14.3

## 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

- 1.0.3 (latest) — 2016-01-21
- 1.0.1 — 2016-01-21
- 1.0.0 — 2016-01-21

## README

# glob-navbar
Glob NavBar is component on React

## Usage

```sh
npm install --save @globsecure/glob-navbar
```

## CSS Bootstrap - Dropdown without Javascript
```css
.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}
```

## Example
```js
import React, { PropTypes } from 'react';
import Container from '@hnordt/reax-container';
import Navbar from '@globsecure/glob-navbar';

const menuItems = [{
    title: 'Dropdown',
    items: [
        {title: 'Menu 1', href: '/dropdown-menu-1'},
        {title: 'Menu 2', href: '/dropdown-menu-2'}
    ]
  },
  {title: 'Menu 1', href: '/menu-1'},
  {title: 'Menu 2', href: '/menu-2'}
];


const App = ({ children }) => (
  <Container>
    <Navbar items={menuItems}/>
    {children}
  </Container>
);



App.propTypes = {
  children: PropTypes.node.isRequired
};

export default App;
```

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