React Bootstrap Navdropdown Active

Make Bootstrap dropdown element for your navbar with active class on dropdown element

Getting Started

Prerequisites

react: ^15.4.1

Installing

npm install --save react-bootstrap-navdropdown-active

Usage

import ActiveDropdown from ‘react-bootstrap-navdropdown-active’

<ActiveDropdown activeRoutes={['/foo/bar', ‘/bar/baz’]} baseClassName="dropdown-toggle" title="Foo">
	<li><Link to=“/foo/bar” activeClassName=“active”>Foo</Link></li>
	<li><Link to=“/bar/baz” activeClassName=“active”>Baz</Link></li>
</ActiveDropdown>          

Result

<li class="dropdown">
  <a class=“dropdown-toogle” data-toggle=“dropdown” role=“button” aria-haspopup=“true” aria-expanded=“false”>Foo<span className=“caret” /></a>
    <ul className=“dropdown-menu”>
      <li><a href=“/foo/bar”>Foo</a></li>
      <li><a href="/bar/baz“>Bar</a></li>
    </ul>
</li>

Parameters

| Name Parameter | Required | Type | Note | | --- | --- | --- | --- | | activeRoutes | Yes | Array | Use this parameter to define which routes need to compare | | | baseClassName | Yes | String | Set the default CSS class independently for active class. If nothing CSS class must be used by default set empty string | | | title | Yes | String | Set the name showed on top of dropdown | |

Running the tests

npm test

Contributing

• Fork the repo
• Make tests for your contribution
• Make you contribute
• Running tests
• Make a pull request

Authors

• Giuseppe Aremare - Initial work - Twitter GitHub