{"id":16482956,"url":"https://github.com/yusinto/react-site-nav","last_synced_at":"2025-04-09T13:09:29.353Z","repository":{"id":32693896,"uuid":"139243212","full_name":"yusinto/react-site-nav","owner":"yusinto","description":"A kick ass site menu powered by styled components inspired by Stripe.","archived":false,"fork":false,"pushed_at":"2023-01-11T22:26:30.000Z","size":31370,"stargazers_count":198,"open_issues_count":94,"forks_count":19,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-13T09:15:40.433Z","etag":null,"topics":["animated-menu","bar","css-animations","menu","menu-animation","menu-item","menu-navigation","menubar","nav","navbar","navigate","navigation","navigation-menus","navigationbar","navigationview","react-site-nav","site","sitenav","sitenavigationelement","styled-components"],"latest_commit_sha":null,"homepage":"","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/yusinto.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}},"created_at":"2018-06-30T11:16:40.000Z","updated_at":"2024-03-21T22:58:30.000Z","dependencies_parsed_at":"2023-01-14T22:00:45.273Z","dependency_job_id":null,"html_url":"https://github.com/yusinto/react-site-nav","commit_stats":null,"previous_names":["yusinto/react-site-menu"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Freact-site-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Freact-site-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Freact-site-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yusinto%2Freact-site-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yusinto","download_url":"https://codeload.github.com/yusinto/react-site-nav/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248045245,"owners_count":21038554,"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","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":["animated-menu","bar","css-animations","menu","menu-animation","menu-item","menu-navigation","menubar","nav","navbar","navigate","navigation","navigation-menus","navigationbar","navigationview","react-site-nav","site","sitenav","sitenavigationelement","styled-components"],"created_at":"2024-10-11T13:12:35.215Z","updated_at":"2025-04-09T13:09:29.334Z","avatar_url":"https://github.com/yusinto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"logo.jpg\" width=\"390\" /\u003e\n\u003c/p\u003e\n\n[![npm version](https://img.shields.io/npm/v/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm downloads](https://img.shields.io/npm/dm/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm](https://img.shields.io/npm/dt/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm](https://img.shields.io/npm/l/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav)\n\n\u003e **A beautiful site navigation bar to be proud of. Powered by styled components inspired by stripe.com** :tada:\n\n\u003cb\u003eCheck out the live preview \u003ca href=\"https://react-site-nav.now.sh\" target=\"_blank\"\u003ehere\u003c/a\u003e (powered by \u003ca href=\"https://zeit.co/now\"\u003enow\u003c/a\u003e).\u003c/b\u003e\n\n![react-site-nav-clip](/animated.gif)\n\nYour search for the perfect site navigation bar ends here. Finally a world class navigation bar \nyou can use straight out of the box. Why use this package?\n* Beautiful animations\n* Automatic viewport detection and correction so flyouts never get rendered off screen\n* Completely customisable\n* Powered by css grid, css animations and styled components\n\nNo more compromises. Welcome to react-site-nav.\n\n## Installation\n\nyarn add react-site-nav\n\n## Quickstart\n\n```js\nimport React from 'react';\nimport {Switch, Link, Route} from 'react-router-dom';\nimport SiteNav, {ContentGroup} from 'react-site-nav'; // 1. Do this\nimport Home from './home';\nimport MyStory from './myStory';\n\nexport default () =\u003e\n  (\n    \u003cdiv\u003e\n      {/* 2. Add SiteNav with ContentGroup as children */}\n      \u003cSiteNav\u003e\n        \u003cContentGroup title=\"About\" height=\"200\"\u003e\n          {/* 3. You can add anything in a ContentGroup */}\n          \u003cul\u003e\n            {/* react router link! */}\n            \u003cli\u003e\u003cLink to=\"/my-story\"\u003eMy Story\u003c/Link\u003e\u003c/li\u003e\n            \u003cli\u003eAnother list item\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/ContentGroup\u003e\n        \u003cContentGroup title=\"Contact\" height=\"200\"\u003e\n          Free text followed by some links.\u003cbr/\u003e\n          \u003ca href=\"mailto:yusinto@gmail.com\"\u003eEmail\u003c/a\u003e\u003cbr/\u003e\n          \u003ca href=\"https://github.com/yusinto\"\u003eGithub\u003c/a\u003e\n        \u003c/ContentGroup\u003e\n      \u003c/SiteNav\u003e\n      \u003cSwitch\u003e\n        \u003cRoute exact path=\"/\" component={Home}/\u003e\n        \u003cRoute path=\"/my-story\" component={MyStory}/\u003e\n      \u003c/Switch\u003e\n    \u003c/div\u003e\n  );\n\n```\n\nCheck the two [examples](https://github.com/yusinto/react-site-nav/tree/master/examples) for a fully working spa with\nreact router, server side rendering and hot reload.\n\n## Api\n### SiteNav\nThe main react component that represents the site nav. The root container is a css grid so\nmost of the props below maps directly to this grid and should be self-explanatory. Place\nContentGroup components as children of SiteNav to render the \"flyouts\".\n\n```jsx\n  \u003cSiteNav\n    align=\"center\" /* center, left, right. This directly maps to justify-content of the root grid. */\n    columnWidth=\"150\"\n    rowHeight=\"45\"\n    background=\"#323232\"\n    color=\"#fff\"\n    fontSize=\"18\"\n    fontFamily=\"Helvetica, sans-serif\"\n    contentBackground=\"#fff\" /* Applies to all content groups */\n    contentColor=\"#323232\" /* Applies to all content groups */\n    contentTop=\"0\" /* Adjusts the distance between ContentGroups and root items */\n    breakpoint=\"768\" /* Show site nav at this breakpoint */\n    debug={false} /* Keep ContentGroups open to make debugging easier */\n  \u003e\n    { /* These will render as flyouts */}\n    \u003cContentGroup\u003e...\u003c/ContentGroup\u003e\n    \u003cContentGroup\u003e...\u003c/ContentGroup\u003e\n  \u003c/SiteNav\u003e\n```\n\n### ContentGroup\nEach SiteNav contains ContentGroup children components. Each ContentGroup will be rendered\nas a \"flyout\" on hover of the root items. It accepts the following props which are self-explanatory.\n\n```jsx\n  \u003cContentGroup \n    title=\"Products\" \n    width=\"420\"\n    height=\"270\"\n    rootUrl=\"https://some/link\" /* Optional. Render root item as a link */\n    background=\"white\" /* Optional. Overrides SiteNav contentBackground property */\n  \u003e\n  {\n    /* You can render anything here! */\n  }\n  \u003c/ContentGroup\u003e\n```\n\nTo render a root item as a link without a ContentGroup, you can do this:\n\n```jsx\n  \u003cContentGroup title=\"Open Source\" rootUrl=\"https://github.com/yusinto\" /\u003e\n```\n\nBy not specifying width and height, SiteNav assumes you just want to render the root item\nwithout a ContentGroup. Of course you can have a linked root item plus a ContentGroup. Just specify either\na width or a height so SiteNav knows you want to render the group. \n\n```jsx\n  \u003cContentGroup title=\"Open Source\" rootUrl=\"https://github.com/yusinto\" height=\"200\"\u003e\n    {\n      /* You can render anything here! */\n    }\n  \u003c/ContentGroup\u003e\n```\n\nCheck the demo in my [blog](https://reactjunkie.com/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Freact-site-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyusinto%2Freact-site-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyusinto%2Freact-site-nav/lists"}