{"id":13755476,"url":"https://github.com/trendmicro-frontend/react-navs","last_synced_at":"2025-08-01T04:04:45.719Z","repository":{"id":57167627,"uuid":"79348123","full_name":"trendmicro-frontend/react-navs","owner":"trendmicro-frontend","description":"React Navs component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:06:36.000Z","size":3231,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-07-06T11:50:07.949Z","etag":null,"topics":["nav","navigation","react"],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-navs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendmicro-frontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-18T14:32:37.000Z","updated_at":"2023-09-22T14:06:28.000Z","dependencies_parsed_at":"2024-01-17T15:20:54.230Z","dependency_job_id":null,"html_url":"https://github.com/trendmicro-frontend/react-navs","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/trendmicro-frontend/react-navs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-navs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-navs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-navs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-navs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-navs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-navs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268166924,"owners_count":24206448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nav","navigation","react"],"created_at":"2024-08-03T10:00:54.865Z","updated_at":"2025-08-01T04:04:45.648Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"readme":"# react-navs [![build status](https://travis-ci.org/trendmicro-frontend/react-navs.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-navs) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-navs/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-navs?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-navs.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-navs/)\n\nReact Navs\n\nDemo: https://trendmicro-frontend.github.io/react-navs\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-navs](https://github.com/trendmicro-frontend/react-navs):\n\n  ```\n  npm install --save react @trendmicro/react-navs\n  ```\n\n2. At this point you can import `@trendmicro/react-navs` and its styles in your application as follows:\n\n  ```js\n  import {\n      Nav,\n      NavItem,\n      NavDropdown, // optional\n      MenuItem, // optional\n      TabContent,\n      TabPane\n  } from '@trendmicro/react-navs';\n\n  // Be sure to include styles at some point, probably during your bootstraping\n  import '@trendmicro/react-navs/dist/react-navs.css';\n\n  // [Optional] Include react-dropdown.css when using NavDropdown\n  import '@trendmicro/react-dropdown/dist/react-dropdown.css'\n  ```\n\n## Usage\n\n### Tabs\n\n```js\n\u003cNav\n    navStyle=\"tabs\"\n    activeKey={this.state.activeTab}\n    onSelect={(eventKey, event) =\u003e {\n        this.setState({ activeTab: eventKey });\n    }}\n    style={{\n        borderBottomColor: 'transparent' // Make a transparent bottom border\n    }}\n\u003e\n    \u003cNavItem eventKey={1}\u003eItem 1\u003c/NavItem\u003e\n    \u003cNavItem eventKey={2}\u003eItem 2\u003c/NavItem\u003e\n    \u003cNavItem eventKey={3}\u003eItem 3\u003c/NavItem\u003e\n    \u003cNavDropdown eventKey={4} title=\"NavItem 4\"\u003e\n        \u003cMenuItem eventKey={4.1}\u003eAction\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={4.2}\u003eAnother action\u003c/MenuItem\u003e\n        \u003cMenuItem divider /\u003e\n        \u003cMenuItem eventKey={4.3}\u003eSeparated link\u003c/MenuItem\u003e\n    \u003c/NavDropdown\u003e\n\u003c/Nav\u003e\n\u003cTabContent activeKey={this.state.activeTab}\u003e\n    \u003cTabPane eventKey={1}\u003eTab 1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={2}\u003eTab 2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={3}\u003eTab 3 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.1}\u003eTab 4.1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.2}\u003eTab 4.2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.3}\u003eTab 4.3 content\u003c/TabPane\u003e\n\u003c/TabContent\u003e\n```\n\n### Light Tabs\n\n```js\n\u003cNav\n    navStyle=\"light-tabs\"\n    activeKey={this.state.activeTab}\n    onSelect={(eventKey, event) =\u003e {\n        this.setState({ activeTab: eventKey });\n    }}\n\u003e\n    \u003cNavItem eventKey={1}\u003eItem 1\u003c/NavItem\u003e\n    \u003cNavItem eventKey={2}\u003eItem 2\u003c/NavItem\u003e\n    \u003cNavItem eventKey={3}\u003eItem 3\u003c/NavItem\u003e\n    \u003cNavDropdown eventKey={4} title=\"NavItem 4\"\u003e\n        \u003cMenuItem eventKey={4.1}\u003eAction\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={4.2}\u003eAnother action\u003c/MenuItem\u003e\n        \u003cMenuItem divider /\u003e\n        \u003cMenuItem eventKey={4.3}\u003eSeparated link\u003c/MenuItem\u003e\n    \u003c/NavDropdown\u003e\n\u003c/Nav\u003e\n\u003cTabContent activeKey={this.state.activeTab}\u003e\n    \u003cTabPane eventKey={1}\u003eTab 1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={2}\u003eTab 2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={3}\u003eTab 3 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.1}\u003eTab 4.1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.2}\u003eTab 4.2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.3}\u003eTab 4.3 content\u003c/TabPane\u003e\n\u003c/TabContent\u003e\n```\n\n### Panel Tabs\n\n```js\n\u003cNav\n    navStyle=\"panel-tabs\"\n    activeKey={this.state.activeTab}\n    onSelect={(eventKey, event) =\u003e {\n        this.setState({ activeTab: eventKey });\n    }}\n\u003e\n    \u003cNavItem eventKey={1}\u003eItem 1\u003c/NavItem\u003e\n    \u003cNavItem eventKey={2}\u003eItem 2\u003c/NavItem\u003e\n    \u003cNavItem eventKey={3}\u003eItem 3\u003c/NavItem\u003e\n    \u003cNavDropdown eventKey={4} title=\"NavItem 4\"\u003e\n        \u003cMenuItem eventKey={4.1}\u003eAction\u003c/MenuItem\u003e\n        \u003cMenuItem eventKey={4.2}\u003eAnother action\u003c/MenuItem\u003e\n        \u003cMenuItem divider /\u003e\n        \u003cMenuItem eventKey={4.3}\u003eSeparated link\u003c/MenuItem\u003e\n    \u003c/NavDropdown\u003e\n\u003c/Nav\u003e\n\u003cTabContent activeKey={this.state.activeTab}\u003e\n    \u003cTabPane eventKey={1}\u003eTab 1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={2}\u003eTab 2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={3}\u003eTab 3 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.1}\u003eTab 4.1 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.2}\u003eTab 4.2 content\u003c/TabPane\u003e\n    \u003cTabPane eventKey={4.3}\u003eTab 4.3 content\u003c/TabPane\u003e\n\u003c/TabContent\u003e\n```\n\n## API\n\n### Properties\n\n#### Nav\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nactiveHref | string | | Marks the child NavItem with a matching `href` prop as active.\nactiveKey | any | | Marks the NavItem with a matching `eventKey` as active. Has a higher precedence over `activeHref`.\nnavStyle | One of:\u003cbr/\u003e'tabs'\u003cbr/\u003e'light-tabs'\u003cbr/\u003e'panel-tabs'\u003cbr/\u003e'navbar' | 'tabs' | Component visual or contextual style variants.\njustified | boolean | false | Make tabs equal widths of their parent at screens wider than 768px. On smaller screens, the nav links are stacked.\nstacked | boolean | false | Position NavItem vertically.\nonSelect | function(eventKey, event) | | A callback fired when a NavItem is selected.\nrole | string | | ARIA role for the Nav.\n\n#### NavItem\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nactive | boolean | false | Highlight the nav item as active.\ndisabled | boolean | false | Whether or not component is disabled.\neventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected nav item.\nhref | string | |\nonClick | function(event) | | Callback fired when the nav item is clicked.\nonSelect | function(eventKey, event) | | Callback fired when the nav item is selected.\nrole | string | | ARIA role for the NavItem.\n\n#### NavDropdown\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\ncomponentClass | string|component | | A custom element for this component\ndropup | boolean | false | The menu will open above the dropdown button, instead of below it.\ndisabled | boolean | false | Whether or not component is disabled.\npullRight | boolean | false | Align the menu to the right side of the NavDropdown toggle.\nopen | boolean | false | Whether or not the dropdown is visible.\nonClose | function(event) | | A callback fired when the dropdown closes.\nonToggle | function(boolean) | | A callback fired when the dropdown wishes to change visibility. Called with the requested `open` value.\nonSelect | function(eventKey, event) | | A callback fired when a menu item is selected.\nrole | string | | If `'menuitem'`, causes the dropdown to behave like a menu item rather than a menu button.\nrootCloseEvent | One of:\u003cbr/\u003e'click'\u003cbr/\u003e'mousedown' | | Which event when fired outside the component will cause it to be closed.\nactive | boolean | false | Highlight the nav dropdown as active.\ntitle | node | |\nnoCaret | boolean | false | Whether to prevent a caret from being rendered next to the title.\n\n#### MenuItem\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nactive | boolean | false | Highlight the menu item as active.\ndisabled | boolean | false | Disable the menu item, making it unselectable.\ndivider | boolean | false | Style the menu item as a horizontal rule, providing visual separation between groups of menu items.\neventKey | any | | Value passed to the `onSelect` handler, useful for identifying the selected menu item.\nheader | boolean | false | Style the menu item as a header label, useful for describing a group of menu items.\nhref | string | | HTML `href` attribute corresponding to `a.href`.\nonClick | function(event) | | Callback fired when the menu item is clicked.\nonSelect | function(eventKey, event) | | Callback fired when the menu item is selected.\n\n#### TabContent\n\nName | Type | Default | Description\n:--- | :--- | :------ | :----------\nactiveKey | any | |\n\n#### TabPane\n\nName     | Type    | Default | Description\n---------|---------|---------|------------\neventKey | any     |         |\nlazy     | boolean | false   | If `true`, the TabPane will be unmounted when inactive.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-navs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-navs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-navs/lists"}