Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-navbar
React Navbar component
https://github.com/trendmicro-frontend/react-navbar
Last synced: 26 days ago
JSON representation
React Navbar component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-navbar
- Owner: trendmicro-frontend
- License: mit
- Created: 2017-03-29T07:47:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:09:04.000Z (about 1 year ago)
- Last Synced: 2024-11-09T17:04:32.635Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-navbar
- Size: 1.44 MB
- Stars: 14
- Watchers: 18
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-navbar - React Navbar component ([demo](https://trendmicro-frontend.github.io/react-navbar/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-navbar - React Navbar component ([demo](https://trendmicro-frontend.github.io/react-navbar/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-navbar - React Navbar component ([demo](https://trendmicro-frontend.github.io/react-navbar/)). (Trend Micro / React Components)
README
# react-navbar [](https://travis-ci.org/trendmicro-frontend/react-navbar) [](https://coveralls.io/github/trendmicro-frontend/react-navbar?branch=master)
[](https://nodei.co/npm/@trendmicro/react-navbar/)
React Navbar
Demo: https://trendmicro-frontend.github.io/react-navbar
## Installation
1. Install the latest version of [react](https://github.com/facebook/react), [react-sticky@5](https://github.com/captivationsoftware/react-sticky), and [react-navbar](https://github.com/trendmicro-frontend/react-navbar):
```
npm install --save react react-sticky@5 @trendmicro/react-navbar
```
2. At this point you can import `@trendmicro/react-navbar` and all dependent styles in your application as follows:
```js
import Navbar from '@trendmicro/react-navbar';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-dropdown/dist/react-dropdown.css';
import '@trendmicro/react-navs/dist/react-navs.css';
import '@trendmicro/react-navbar/dist/react-navbar.css';
```
## Usage
### Sticky Navigation Bar
#### StickyNavbar.jsx
```js
import Anchor from '@trendmicro/react-anchor';
import Dropdown from '@trendmicro/react-dropdown';
import Navbar from '@trendmicro/react-navbar';
import { Nav, NavDropdown, NavItem, MenuItem } from '@trendmicro/react-navs';
import PropTypes from 'prop-types';
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
import styles from './index.styl';
const noop = () => {};
const PageContent = () => (
Page Content
);
const StickyNavbar = ({ state, actions }) => {
return (
Product Name
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
Menu Item 1
Menu Item 2
Menu Item 3
Menu item 4
Second level item one
Second level item two
);
};
StickyNavbar.propTypes = {
state: PropTypes.object,
actions: PropTypes.object
};
export default StickyNavbar;
```
#### app.jsx
```js
import React from 'react';
import ReactDOM from 'react-dom';
import StickyNavbar from './StickyNavbar.jsx';
class App extends React.Component {
state = {
tab: ''
};
actions = {
selectTab: (eventKey, event) => {
if (!eventKey) {
return;
}
const tab = eventKey.replace(/\..+/g, '');
this.setState({ tab });
}
};
render() {
return (
)
}
}
ReactDOM.render(, document.getElementById('container'));
```
#### index.styl
```css
.site-header {
position: relative;
padding: 0 20px;
height: 64px;
margin-bottom: 0;
background-color: #fff;
a:link,
a:hover,
a:active,
a:visited,
a:focus {
color: #222;
text-decoration: none;
}
.banner {
width: 32px;
height: 32px;
margin: 16px 0;
margin-right: 10px;
background: url("./tball.svg") center left no-repeat;
float: left;
}
.title {
padding: 16px 0;
font-family: "Interstate-Light", Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 26px;
font-weight: 200;
letter-spacing: -.03em;
white-space: nowrap;
}
}
```
#### [tball.svg](examples/tball.svg?raw=true)
## API
### Properties
Name | Type | Default | Description
:--- | :--- | :------ | :----------
## License
MIT