https://github.com/netlify/netlify-ui-community-nav
A web component for shared navigation on Community, Forums, Answers, Podcasts, Swag, and others
https://github.com/netlify/netlify-ui-community-nav
Last synced: 8 months ago
JSON representation
A web component for shared navigation on Community, Forums, Answers, Podcasts, Swag, and others
- Host: GitHub
- URL: https://github.com/netlify/netlify-ui-community-nav
- Owner: netlify
- Created: 2021-05-05T22:17:52.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-06T20:40:59.000Z (over 1 year ago)
- Last Synced: 2025-04-21T15:54:38.112Z (8 months ago)
- Language: CSS
- Size: 804 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @netlify/marketing-community-nav
A web component for shared navigation on [Community](https://www.netlify.com/community/), [Explorers](https://explorers.netlify.com/), [Forums](https://answers.netlify.com/), [Podcast](https://remotelyinteresting.netlify.com/), [Swag](https://swag.netlify.com/), and others.
* [**Demo**](https://netlify-ui-community-nav.netlify.app/demo.html)
* [Figma Designs](https://www.figma.com/file/D7YIl02a4P2W0LKur2Nxbw/Community-2.0---navigation?node-id=112%3A5&viewport=-849%2C-3011%2C1)
## Usage
1. Install `npm install @netlify/marketing-community-nav`
2. Add `nav.js` and `nav.css` to your site’s bundler.
3. Copy markup for the property (find the `` in `demo.html`) and add to the top of the page (update the “Customize” sections)
The reason we embed markup inline inside of the web component here is for both progressive enhancement and performance reasons. The hamburger icon is also embedded inline to animate the transition when opened.
4. (Optional, performance) Add to ``: ``
5. (Optional, performance) Add to ``: `document.documentElement.classList.add("ncn-ctm");`
## Release
1. Update `version` in package.json
2. Update Version comment in `nav.js`, `nav.css`
3. Update `version` HTML attribute in `demo.html`
4. Convert HTML to JSX, if needed
* Translate any `class` attributes to `className`. Leave `class` on root `` element as is.
* Other attributes with a `-` will also need to be translated to camelCase: e.g. `stop-color` to `stopColor`, `fill-rule` to `fillRule`.
5. Commit, tag, push.