Appearance
Nav Element
Provides a responsive page navigation menu which handles positioning and social links
Usage
Basic Usage
The <page-nav> element is intended to act as the page's primary navigation menu. It does not provide any content of its own, instead wrapping supplied content with a native <nav> element, as well as responsive styling that rolls content behind a hamburger menu on smaller viewports.
With Social Links
It is common for a page's primary navigation menu to also include links to other sources of content, such as social networks like LinkedIn, or hosted services like GitHub. To facilitate this, the <page-nav> element provides a socials slot.
Links placed in the socials slot will be automatically transformed into logo images for the site they link to, based on the contents of the href attribute of the link, and can be placed in any order.
BYO Socials
It's also possible to include your own icon for links to sources that aren't already handled. This is done either by including an <img> element in the link, or with inline SVG markup.
Where the <page-nav> element detects an <img> element whose source is an SVG file, it will attempt to fetch the SVG file for inline rendering, so that styling can be applied consistently across all icons.
html
<page-nav>
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a slot="socials" href="https://buymeacoffee.com/">
<img src="/coffee.svg" alt="Buy Me a Coffee" />
</a>
<a slot="socials" href="https://buymeacoffee.com/" title="Buy Me a Coffee">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="coffee">
<mask id="lineMdBuyMeACoffeeTwotone0">
<path fill="#fff" d="M5 6C5 4 7 6 11.5 6C16 6 19 4 19 6L19 7C19 8.5 17 9 12.5 9C8 9 5 9 5 7L5 6Z" />
</mask>
<mask id="lineMdBuyMeACoffeeTwotone1">
<path fill="#fff" d="M10.125 18.15C10.04 17.29 9.4 11.98 9.4 11.98C9.4 11.98 11.34 12.31 12.5 11.73C13.66 11.16 14.98 11 14.98 11C14.98 11 14.4 17.96 14.35 18.46C14.3 18.96 13.45 19.3 12.95 19.3L11.23 19.3C10.73 19.3 10.21 19 10.125 18.15Z" />
</mask>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path stroke-dasharray="32" stroke-dashoffset="32" d="M7.5 10.5C7.5 10.5 8.33 17.43 8.5 19C8.67 20.57 10 21 11 21L13 21C14.5 21 15.875 19.86 16 19C16.125 18.14 17 7 17 7">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="32;0" />
</path>
<path stroke-dasharray="12" stroke-dashoffset="12" d="M16.5 6C16.5 3.5 14 3 12 3C10 3 9.1 3.43 8 4">
<animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" values="12;24" />
</path>
</g>
<rect width="16" height="5" x="20" y="4" fill="currentColor" mask="url(#lineMdBuyMeACoffeeTwotone0)">
<animate fill="freeze" attributeName="x" begin="0.4s" dur="0.4s" values="20;4" />
</rect>
<rect width="8" height="10" x="8" y="20" fill="currentColor" fill-opacity="0.3" mask="url(#lineMdBuyMeACoffeeTwotone1)">
<animate fill="freeze" attributeName="y" begin="1s" dur="0.4s" values="20;10" />
</rect>
</svg>
</a>
</page-nav>Responsive Sizing
For container widths typical of smaller viewports, the <page-nav> element will automatically fold behind a "hamburger menu". This means that navigation links need only be specified once in a page's markup.
The appearance of the <page-nav> element and its contents for variable container widths is demonstrated in the example below.
html
<page-nav>
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a slot="socials" href="https://www.twitter.com">Twitter</a>
<a slot="socials" href="https://www.npmjs.com">NPM</a>
<a slot="socials" href="https://github.com/sleelin/portfolito">GitHub</a>
</page-nav>CSS Parts
| Name | Description |
|---|---|
container | Responsive container element |
content | Wrapper for native nav element |
links | Wrapper for non-social page links |
socials | Wrapper for social page links |
CSS Variables
| Name | Description | Type | Default |
|---|---|---|---|
--container-textColor | Color of the links and social logos, and hamburger menu button | color |
|
--container-textColor-sm | Color of the links and social logos when hidden behind hamburger menu | color |
|
--container-hoverColor | Color of the links and social logos on hover | color |
|
--link-shadowColor | Color of the radial shadow of links on hover | color |
|
Slots
| Name | Description | Type |
|---|---|---|
| none | In-page navigation links to content with specific IDs | <a> |
socials | Links to social networks, displayed with relevant logo | <a> |