You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/side-nav

Package Overview
Dependencies
Maintainers
12
Versions
217
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/side-nav - npm Package Compare versions

Comparing version

24.1.1
to
24.2.0-alpha1

12

package.json
{
"name": "@vaadin/side-nav",
"version": "24.1.1",
"version": "24.2.0-alpha1",
"publishConfig": {

@@ -38,6 +38,6 @@ "access": "public"

"dependencies": {
"@vaadin/component-base": "~24.1.1",
"@vaadin/vaadin-lumo-styles": "~24.1.1",
"@vaadin/vaadin-material-styles": "~24.1.1",
"@vaadin/vaadin-themable-mixin": "~24.1.1",
"@vaadin/component-base": "24.2.0-alpha1",
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha1",
"@vaadin/vaadin-material-styles": "24.2.0-alpha1",
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha1",
"lit": "^2.0.0"

@@ -55,3 +55,3 @@ },

],
"gitHead": "c3a3d904885bd37ebb07a84b09617a340b4fab7e"
"gitHead": "0dbb118320203ab6c0c07450a3e718815367589f"
}

58

src/vaadin-side-nav-base-styles.js
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -17,3 +17,3 @@ */

a {
[part='link'] {
flex: auto;

@@ -34,2 +34,12 @@ min-width: 0;

[part='children'] {
padding: 0;
margin: 0;
list-style-type: none;
}
:host(:not([has-children])) button {
display: none !important;
}
:host(:not([path])) a {

@@ -61,8 +71,2 @@ position: relative;

}
slot[name='children'] {
/* Needed to make role="list" work */
display: block;
width: 100%;
}
`;

@@ -79,30 +83,22 @@

summary {
button {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: inherit;
width: 100%;
margin: 0;
padding: 0;
background-color: initial;
color: inherit;
border: initial;
outline: none;
font: inherit;
text-align: inherit;
}
summary ::slotted([slot='label']) {
display: block;
[part='children'] {
padding: 0;
margin: 0;
list-style-type: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::marker {
content: '';
}
summary::after {
display: inline-flex;
align-items: center;
justify-content: center;
}
slot {
/* Needed to make role="list" work */
display: block;
}
`;

20

src/vaadin-side-nav-item.d.ts
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -57,2 +57,13 @@ */

*
* ### Styling
*
* Part name | Description
* ----------------|----------------
* `content` | The element that wraps link and toggle button
* `children` | The element that wraps child items
* `link` | The clickable anchor used for navigation
* `toggle-button` | The toggle button
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.

@@ -67,2 +78,9 @@ */

/**
* A comma-separated list of alternative paths matching this item.
*
* @attr {string} path-aliases
*/
pathAliases: string | null | undefined;
/**
* Whether to show the child items or not

@@ -69,0 +87,0 @@ */

122

src/vaadin-side-nav-item.js
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -10,2 +10,4 @@ */

import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

@@ -19,2 +21,27 @@ import { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';

/**
* A controller to manage the item content children slot.
*/
class ChildrenController extends SlotController {
constructor(host) {
super(host, 'children', null, { observe: true, multiple: true });
}
/**
* @protected
* @override
*/
initAddedNode() {
this.host.requestUpdate();
}
/**
* @protected
* @override
*/
teardownNode() {
this.host.requestUpdate();
}
}
/**
* A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.

@@ -54,2 +81,13 @@ * Not intended to be used separately.

*
* ### Styling
*
* Part name | Description
* ----------------|----------------
* `content` | The element that wraps link and toggle button
* `children` | The element that wraps child items
* `link` | The clickable anchor used for navigation
* `toggle-button` | The toggle button
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @fires {CustomEvent} expanded-changed - Fired when the `expanded` property changes.

@@ -75,2 +113,9 @@ *

/**
* A comma-separated list of alternative paths matching this item.
*
* @attr {string} path-aliases
*/
pathAliases: String,
/**
* Whether to show the child items or not

@@ -107,2 +152,8 @@ *

constructor() {
super();
this._childrenController = new ChildrenController(this);
}
/** @protected */

@@ -118,2 +169,5 @@ get _button() {

firstUpdated() {
// Controller to detect whether the item has child items.
this.addController(this._childrenController);
// By default, if the user hasn't provided a custom role,

@@ -133,5 +187,7 @@ // the role attribute is set to "listitem".

if (props.has('path')) {
if (props.has('path') || props.has('pathAliases')) {
this.__updateActive();
}
this.toggleAttribute('has-children', this._childrenController.nodes.length > 0);
}

@@ -156,10 +212,11 @@

return html`
<a href="${ifDefined(this.path)}" part="item" aria-current="${this.active ? 'page' : 'false'}">
<slot name="prefix"></slot>
<slot></slot>
<slot name="suffix"></slot>
<div part="content" @click="${this._onContentClick}">
<a href="${ifDefined(this.path)}" part="link" aria-current="${this.active ? 'page' : 'false'}">
<slot name="prefix"></slot>
<slot></slot>
<slot name="suffix"></slot>
</a>
<button
part="toggle-button"
@click="${this.__toggleExpanded}"
?hidden="${!this.querySelector('[slot=children]')}"
@click="${this._onButtonClick}"
aria-controls="children"

@@ -169,4 +226,6 @@ aria-expanded="${this.expanded}"

></button>
</a>
<slot name="children" role="list" part="children" id="children" ?hidden="${!this.expanded}"></slot>
</div>
<ul part="children" ?hidden="${!this.expanded}">
<slot name="children"></slot>
</ul>
`;

@@ -176,5 +235,19 @@ }

/** @private */
__toggleExpanded(e) {
e.preventDefault();
e.stopPropagation();
_onButtonClick(event) {
// Prevent the event from being handled
// by the content click listener below
event.stopPropagation();
this.__toggleExpanded();
}
/** @private */
_onContentClick() {
// Toggle item expanded state unless the link has a non-empty path
if (this.path == null && this.hasAttribute('has-children')) {
this.__toggleExpanded();
}
}
/** @private */
__toggleExpanded() {
this.expanded = !this.expanded;

@@ -198,19 +271,12 @@ }

__calculateActive() {
const pathAbsolute = this.path.startsWith('/');
// Absolute path or no base uri in use. No special comparison needed
if (pathAbsolute) {
// Compare an absolute view path
return document.location.pathname === this.path;
if (this.path == null) {
return false;
}
const hasBaseUri = document.baseURI !== document.location.href;
if (!hasBaseUri) {
// Compare a relative view path (strip the starting slash)
return document.location.pathname.substring(1) === this.path;
if (matchPaths(document.location.pathname, this.path)) {
return true;
}
const pathRelativeToRoot = document.location.pathname;
const basePath = new URL(document.baseURI).pathname;
const pathWithoutBase = pathRelativeToRoot.substring(basePath.length);
const pathRelativeToBase =
basePath !== pathRelativeToRoot && pathRelativeToRoot.startsWith(basePath) ? pathWithoutBase : pathRelativeToRoot;
return pathRelativeToBase === this.path;
return (
this.pathAliases != null &&
this.pathAliases.split(',').some((alias) => matchPaths(document.location.pathname, alias))
);
}

@@ -217,0 +283,0 @@ }

13

src/vaadin-side-nav.d.ts

@@ -7,2 +7,3 @@ /**

import { LitElement } from 'lit';
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

@@ -52,5 +53,15 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';

*
* ### Styling
*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `children` | The element that wraps child items
* `toggle-button` | The toggle button
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.
*/
declare class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
declare class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
/**

@@ -57,0 +68,0 @@ * Whether the side nav is collapsible. When enabled, the toggle icon is shown.

82

src/vaadin-side-nav.js

@@ -7,2 +7,4 @@ /**

import { html, LitElement } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

@@ -47,2 +49,12 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';

*
* ### Styling
*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `children` | The element that wraps child items
* `toggle-button` | The toggle button
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @fires {CustomEvent} collapsed-changed - Fired when the `collapsed` property changes.

@@ -55,3 +67,3 @@ *

*/
class SideNav extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
static get is() {

@@ -61,2 +73,6 @@ return 'vaadin-side-nav';

static get shadowRootOptions() {
return { ...LitElement.shadowRootOptions, delegatesFocus: true };
}
static get properties() {

@@ -93,3 +109,14 @@ return {

constructor() {
super();
this._labelId = `side-nav-label-${generateUniqueId()}`;
}
/** @protected */
get focusElement() {
return this.shadowRoot.querySelector('button');
}
/** @protected */
firstUpdated() {

@@ -105,15 +132,42 @@ // By default, if the user hasn't provided a custom role,

render() {
const label = this.querySelector('[slot="label"]');
if (label && this.collapsible) {
return html`
<details ?open="${!this.collapsed}" @toggle="${this.__toggleCollapsed}">${this.__renderBody(label)}</details>
`;
return html`
<button
part="label"
@click="${this._onLabelClick}"
aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
aria-controls="children"
>
<slot name="label" @slotchange="${this._onLabelSlotChange}"></slot>
<span part="toggle-button" aria-hidden="true"></span>
</button>
<ul id="children" part="children" ?hidden="${this.collapsed}" aria-hidden="${this.collapsed ? 'true' : 'false'}">
<slot></slot>
</ul>
`;
}
/**
* @param {Event} event
* @return {boolean}
* @protected
* @override
*/
_shouldSetFocus(event) {
return event.composedPath()[0] === this.focusElement;
}
/** @private */
_onLabelClick() {
if (this.collapsible) {
this.__toggleCollapsed();
}
return this.__renderBody(label);
}
/** @private */
__renderBody(label) {
_onLabelSlotChange() {
const label = this.querySelector('[slot="label"]');
if (label) {
if (!label.id) label.id = `side-nav-label-${generateUniqueId()}`;
if (!label.id) {
label.id = this._labelId;
}
this.setAttribute('aria-labelledby', label.id);

@@ -123,13 +177,7 @@ } else {

}
return html`
<summary part="label" ?hidden="${label == null}">
<slot name="label" @slotchange="${() => this.requestUpdate()}"></slot>
</summary>
<slot role="list"></slot>
`;
}
/** @private */
__toggleCollapsed(e) {
this.collapsed = !e.target.open;
__toggleCollapsed() {
this.collapsed = !this.collapsed;
}

@@ -136,0 +184,0 @@ }

40

theme/lumo/vaadin-side-nav-item-styles.js

@@ -10,3 +10,9 @@ import '@vaadin/vaadin-lumo-styles/color.js';

export const sideNavItemStyles = css`
a {
[part='content'] {
display: flex;
align-items: center;
}
[part='link'] {
width: 100%;
gap: var(--lumo-space-xs);

@@ -21,3 +27,4 @@ padding: var(--lumo-space-s);

button {
[part='toggle-button'] {
position: relative;
border: 0;

@@ -36,8 +43,12 @@ margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;

:host([has-children]) [part='content'] {
padding-inline-end: var(--lumo-space-s);
}
@media (any-hover: hover) {
a:hover {
[part='link']:hover {
color: var(--lumo-header-text-color);
}
button:hover {
[part='toggle-button']:hover {
color: var(--lumo-body-text-color);

@@ -47,7 +58,7 @@ }

a:active:focus {
[part='link']:active:focus {
background-color: var(--lumo-contrast-5pct);
}
button::before {
[part='toggle-button']::before {
font-family: lumo-icons;

@@ -62,3 +73,3 @@ content: var(--lumo-icons-dropdown);

:host([expanded]) button::before {
:host([expanded]) [part='toggle-button']::before {
transform: none;

@@ -68,9 +79,9 @@ }

@supports selector(:focus-visible) {
a,
button {
[part='link'],
[part='toggle-button'] {
outline: none;
}
a:focus-visible,
button:focus-visible {
[part='link']:focus-visible,
[part='toggle-button']:focus-visible {
border-radius: var(--lumo-border-radius-m);

@@ -81,3 +92,3 @@ box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);

a:active {
[part='link']:active {
color: var(--lumo-header-text-color);

@@ -87,6 +98,7 @@ }

slot:not([name]) {
margin: 0 var(--lumo-space-xs);
margin: 0 var(--lumo-space-s);
}
slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
padding: 0.1em;
color: var(--lumo-contrast-60pct);

@@ -107,3 +119,3 @@ }

:host([active]) a {
:host([active]) [part='link'] {
color: var(--lumo-primary-text-color);

@@ -110,0 +122,0 @@ background-color: var(--lumo-primary-color-10pct);

2

theme/lumo/vaadin-side-nav-item.js
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -5,0 +5,0 @@ */

61

theme/lumo/vaadin-side-nav-styles.js

@@ -19,46 +19,55 @@ import '@vaadin/vaadin-lumo-styles/color.js';

summary {
cursor: var(--lumo-clickable-cursor, default);
[part='label'] {
display: flex;
align-items: center;
width: 100%;
outline: none;
box-sizing: border-box;
border-radius: var(--lumo-border-radius-m);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-s);
font-weight: 500;
line-height: var(--lumo-line-height-xs);
}
summary ::slotted([slot='label']) {
font-size: var(--lumo-font-size-s);
[part='label'] ::slotted([slot='label']) {
color: var(--lumo-secondary-text-color);
margin: var(--lumo-space-s);
border-radius: inherit;
}
summary::after {
font-family: lumo-icons;
color: var(--lumo-tertiary-text-color);
font-size: var(--lumo-icon-size-m);
:host([focus-ring]) [part='label'] {
box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}
[part='toggle-button'] {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--lumo-size-s);
height: var(--lumo-size-s);
transition: transform 140ms;
margin: 0 var(--lumo-space-xs);
margin-inline-start: auto;
margin-inline-end: var(--lumo-space-xs);
font-size: var(--lumo-icon-size-m);
line-height: 1;
color: var(--lumo-contrast-60pct);
font-family: 'lumo-icons';
cursor: var(--lumo-clickable-cursor);
}
:host([collapsible]) summary::after {
content: var(--lumo-icons-dropdown);
[part='toggle-button']::before {
content: var(--lumo-icons-angle-right);
}
@media (any-hover: hover) {
summary:hover::after {
color: var(--lumo-body-text-color);
}
:host(:not([collapsible])) [part='toggle-button'] {
display: none !important;
}
:host([collapsed]) summary::after {
transform: rotate(-90deg);
:host(:not([collapsed])) [part='toggle-button'] {
transform: rotate(90deg);
}
@supports selector(:focus-visible) {
summary {
outline: none;
@media (any-hover: hover) {
[part='label']:hover [part='toggle-button'] {
color: var(--lumo-body-text-color);
}
summary:focus-visible {
box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
}
}

@@ -65,0 +74,0 @@ `;

2

theme/lumo/vaadin-side-nav.js
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -5,0 +5,0 @@ */

2

theme/material/vaadin-side-nav.js
/**
* @license
* Copyright (c) 2017 - 2023 Vaadin Ltd.
* Copyright (c) 2023 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/

@@ -5,0 +5,0 @@ */

28

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/side-nav",
"version": "24.1.1",
"version": "24.2.0-alpha1",
"description-markup": "markdown",

@@ -11,3 +11,3 @@ "contributions": {

"name": "vaadin-side-nav-item",
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

@@ -26,2 +26,13 @@ {

{
"name": "path-aliases",
"description": "A comma-separated list of alternative paths matching this item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "expanded",

@@ -61,2 +72,13 @@ "description": "Whether to show the child items or not",

{
"name": "pathAliases",
"description": "A comma-separated list of alternative paths matching this item.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "expanded",

@@ -81,3 +103,3 @@ "description": "Whether to show the child items or not",

"name": "vaadin-side-nav",
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

@@ -84,0 +106,0 @@ {

13

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/side-nav",
"version": "24.1.1",
"version": "24.2.0-alpha1",
"description-markup": "markdown",

@@ -19,3 +19,3 @@ "framework": "lit",

"name": "vaadin-side-nav-item",
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```",
"description": "A navigation item to be used within `<vaadin-side-nav>`. Represents a navigation target.\nNot intended to be used separately.\n\n```html\n<vaadin-side-nav-item>\n Item 1\n <vaadin-side-nav-item path=\"/path1\" slot=\"children\">\n Child item 1\n </vaadin-side-nav-item>\n <vaadin-side-nav-item path=\"/path2\" slot=\"children\">\n Child item 2\n </vaadin-side-nav-item>\n</vaadin-side-nav-item>\n```\n\n### Customization\n\nYou can configure the item by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\n#### Example\n\n```html\n<vaadin-side-nav-item>\n <vaadin-icon icon=\"vaadin:chart\" slot=\"prefix\"></vaadin-icon>\n Item\n <span theme=\"badge primary\" slot=\"suffix\">Suffix</span>\n</vaadin-side-nav-item>\n```\n\n### Styling\n\nPart name | Description\n----------------|----------------\n`content` | The element that wraps link and toggle button\n`children` | The element that wraps child items\n`link` | The clickable anchor used for navigation\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

@@ -38,2 +38,9 @@ "attributes": [

{
"name": ".pathAliases",
"description": "A comma-separated list of alternative paths matching this item.",
"value": {
"kind": "expression"
}
},
{
"name": "@expanded-changed",

@@ -49,3 +56,3 @@ "description": "Fired when the `expanded` property changes.",

"name": "vaadin-side-nav",
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```",
"description": "`<vaadin-side-nav>` is a Web Component for navigation menus.\n\n```html\n<vaadin-side-nav>\n <vaadin-side-nav-item>Item 1</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 2</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 3</vaadin-side-nav-item>\n <vaadin-side-nav-item>Item 4</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Customization\n\nYou can configure the component by using `slot` names.\n\nSlot name | Description\n----------|-------------\n`label` | The label (text) inside the side nav.\n\n#### Example\n\n```html\n<vaadin-side-nav>\n <span slot=\"label\">Main menu</span>\n <vaadin-side-nav-item>Item</vaadin-side-nav-item>\n</vaadin-side-nav>\n```\n\n### Styling\n\nPart name | Description\n----------------|----------------\n`label` | The label element\n`children` | The element that wraps child items\n`toggle-button` | The toggle button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

@@ -52,0 +59,0 @@ "attributes": [