@globsecure/glob-navbar v1.0.3

glob-navbar

Glob NavBar is component on React

Usage

npm install --save @globsecure/glob-navbar

CSS Bootstrap - Dropdown without Javascript

.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

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;