@netlify/marketing-community-nav
v1.1.0
Published
A web component for shared navigation on Community, Forums, Answers, Podcasts, Swag, and others.
Downloads
13
Maintainers
Keywords
Readme
@netlify/marketing-community-nav
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
andnav.css
to your site’s bundler. - Copy markup for the property (find the
<netlify-ui-community-nav>
indemo.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 indemo.html
- Convert HTML to JSX, if needed
- Translate any
class
attributes toclassName
. Leaveclass
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
tostopColor
,fill-rule
tofillRule
.
- Translate any
- Commit, tag, push.