A web component for shared navigation on Community, Explorers, Forums, Podcast, Swag, and others.
Usage
- Install
npm install @netlify/marketing-community-nav
- Add
nav.js
and nav.css
to your site’s bundler. - Copy markup for the property (find the
<netlify-ui-community-nav>
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.
- (Optional, performance) Add to
<head>
: <link rel="preconnect" href="https://netlify-ui-community-nav.netlify.app/">
- (Optional, performance) Add to
<head>
: <script>document.documentElement.classList.add("ncn-ctm");</script>
Release
- Update
version
in package.json - Update Version comment in
nav.js
, nav.css
- Update
version
HTML attribute in demo.html
- Convert HTML to JSX, if needed
- Translate any
class
attributes to className
. Leave class
on root <netlify-ui-community-nav>
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
.
- Commit, tag, push.