Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/side-nav

Package Overview
Dependencies
Maintainers
12
Versions
188
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.2.0-alpha1 to 24.2.0-alpha2

src/vaadin-side-nav-children-mixin.d.ts
src/vaadin-side-nav-children-mixin.js
theme/material/vaadin-side-nav-item-styles.js
theme/material/vaadin-side-nav-item.js
theme/material/vaadin-side-nav-styles.js

12

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

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

"dependencies": {
"@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",
"@vaadin/component-base": "24.2.0-alpha2",
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha2",
"@vaadin/vaadin-material-styles": "24.2.0-alpha2",
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha2",
"lit": "^2.0.0"

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

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

7

README.md

@@ -52,5 +52,10 @@ # @vaadin/side-nav

Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
This component currently does not support Material theme.
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/side-nav/vaadin-side-nav.js) of the package uses the Lumo theme.
To use the Material theme, import the component from the `theme/material` folder:
```js
import '@vaadin/side-nav/theme/material/vaadin-side-nav.js';
```
You can also import the Lumo version of the component explicitly:

@@ -57,0 +62,0 @@

15

src/vaadin-side-nav-base-styles.js

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

:host([hidden]),
[hidden] {

@@ -18,2 +19,7 @@ display: none !important;

[part='content'] {
display: flex;
align-items: center;
}
[part='link'] {

@@ -33,2 +39,7 @@ flex: auto;

flex: none;
position: relative;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}

@@ -46,6 +57,2 @@

:host(:not([path])) a {
position: relative;
}
:host(:not([path])) button::after {

@@ -52,0 +59,0 @@ content: '';

20

src/vaadin-side-nav-item.d.ts

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

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';

@@ -60,2 +61,4 @@ /**

*
* The following shadow DOM parts are available for styling:
*
* Part name | Description

@@ -68,2 +71,9 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* ---------------|-------------
* `expanded` | Set when the element is expanded.
* `has-children` | Set when the element has child items.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

@@ -73,3 +83,3 @@ *

*/
declare class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
declare class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
/**

@@ -81,7 +91,5 @@ * The path to navigate to

/**
* A comma-separated list of alternative paths matching this item.
*
* @attr {string} path-aliases
* The list of alternative paths matching this item
*/
pathAliases: string | null | undefined;
pathAliases: string[];

@@ -98,3 +106,3 @@ /**

*/
readonly active: boolean;
readonly current: boolean;

@@ -101,0 +109,0 @@ addEventListener<K extends keyof SideNavItemEventMap>(

97

src/vaadin-side-nav-item.js

@@ -8,8 +8,9 @@ /**

import { ifDefined } from 'lit/directives/if-defined.js';
import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
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';
import { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';
import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';

@@ -21,27 +22,2 @@ function isEnabled() {

/**
* 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.

@@ -83,2 +59,4 @@ * Not intended to be used separately.

*
* The following shadow DOM parts are available for styling:
*
* Part name | Description

@@ -91,2 +69,9 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* ---------------|-------------
* `expanded` | Set when the element is expanded.
* `has-children` | Set when the element has child items.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

@@ -100,4 +85,5 @@ *

* @mixes ElementMixin
* @mixes SideNavChildrenMixin
*/
class SideNavItem extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
class SideNavItem extends SideNavChildrenMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
static get is() {

@@ -115,7 +101,10 @@ return 'vaadin-side-nav-item';

/**
* A comma-separated list of alternative paths matching this item.
* The list of alternative paths matching this item
*
* @attr {string} path-aliases
* @type {!Array<string>}
*/
pathAliases: String,
pathAliases: {
type: Array,
value: () => [],
},

@@ -141,3 +130,3 @@ /**

*/
active: {
current: {
type: Boolean,

@@ -152,3 +141,3 @@ value: false,

static get styles() {
return sideNavItemBaseStyles;
return [screenReaderOnly, sideNavItemBaseStyles];
}

@@ -159,3 +148,3 @@

this._childrenController = new ChildrenController(this);
this.__boundUpdateCurrent = this.__updateCurrent.bind(this);
}

@@ -173,4 +162,3 @@

firstUpdated() {
// Controller to detect whether the item has child items.
this.addController(this._childrenController);
super.firstUpdated();

@@ -192,6 +180,4 @@ // By default, if the user hasn't provided a custom role,

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

@@ -202,5 +188,5 @@

super.connectedCallback();
this.__updateActive();
this.__boundUpdateActive = this.__updateActive.bind(this);
window.addEventListener('popstate', this.__boundUpdateActive);
this.__updateCurrent();
window.addEventListener('popstate', this.__boundUpdateCurrent);
}

@@ -211,3 +197,3 @@

super.disconnectedCallback();
window.removeEventListener('popstate', this.__boundUpdateActive);
window.removeEventListener('popstate', this.__boundUpdateCurrent);
}

@@ -219,3 +205,3 @@

<div part="content" @click="${this._onContentClick}">
<a href="${ifDefined(this.path)}" part="link" aria-current="${this.active ? 'page' : 'false'}">
<a id="link" href="${ifDefined(this.path)}" part="link" aria-current="${this.current ? 'page' : 'false'}">
<slot name="prefix"></slot>

@@ -230,3 +216,3 @@ <slot></slot>

aria-expanded="${this.expanded}"
aria-label="Toggle child items"
aria-labelledby="link i18n"
></button>

@@ -237,2 +223,3 @@ </div>

</ul>
<div class="sr-only" id="i18n">${this.i18n.toggle}</div>
`;

@@ -263,25 +250,17 @@ }

/** @private */
__updateActive() {
if (!this.path && this.path !== '') {
this._setActive(false);
return;
__updateCurrent() {
this._setCurrent(this.__isCurrent());
if (this.current) {
this.expanded = this._items.length > 0;
}
this._setActive(this.__calculateActive());
this.toggleAttribute('child-active', document.location.pathname.startsWith(this.path));
if (this.active) {
this.expanded = true;
}
}
/** @private */
__calculateActive() {
__isCurrent() {
if (this.path == null) {
return false;
}
if (matchPaths(document.location.pathname, this.path)) {
return true;
}
return (
this.pathAliases != null &&
this.pathAliases.split(',').some((alias) => matchPaths(document.location.pathname, alias))
matchPaths(document.location.pathname, this.path) ||
this.pathAliases.some((alias) => matchPaths(document.location.pathname, alias))
);

@@ -288,0 +267,0 @@ }

15

src/vaadin-side-nav.d.ts

@@ -11,3 +11,6 @@ /**

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { SideNavChildrenMixin, type SideNavI18n } from './vaadin-side-nav-children-mixin.js';
export type { SideNavI18n };
/**

@@ -55,2 +58,4 @@ * Fired when the `collapsed` property changes.

*
* The following shadow DOM parts are available for styling:
*
* Part name | Description

@@ -62,2 +67,10 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* -------------|-------------
* `collapsed` | Set when the element is collapsed.
* `focus-ring` | Set when the label is focused using the keyboard.
* `focused` | Set when the label is focused.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

@@ -67,3 +80,3 @@ *

*/
declare class SideNav extends FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
declare class SideNav extends SideNavChildrenMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
/**

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

25

src/vaadin-side-nav.js

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

import { sideNavBaseStyles } from './vaadin-side-nav-base-styles.js';
import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';

@@ -51,2 +52,4 @@ function isEnabled() {

*
* The following shadow DOM parts are available for styling:
*
* Part name | Description

@@ -58,2 +61,10 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* -------------|-------------
* `collapsed` | Set when the element is collapsed.
* `focus-ring` | Set when the label is focused using the keyboard.
* `focused` | Set when the label is focused.
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

@@ -67,4 +78,5 @@ *

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

@@ -115,2 +127,11 @@ return 'vaadin-side-nav';

/**
* Name of the slot to be used for children.
* @protected
* @override
*/
get _itemsSlotName() {
return '';
}
/** @protected */

@@ -123,2 +144,4 @@ get focusElement() {

firstUpdated() {
super.firstUpdated();
// By default, if the user hasn't provided a custom role,

@@ -125,0 +148,0 @@ // the role attribute is set to "navigation".

30

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

@@ -7,10 +7,6 @@ import '@vaadin/vaadin-lumo-styles/color.js';

import '@vaadin/vaadin-lumo-styles/font-icons.js';
import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
export const sideNavItemStyles = css`
[part='content'] {
display: flex;
align-items: center;
}
[part='link'] {

@@ -27,15 +23,10 @@ width: 100%;

[part='link'][href] {
cursor: pointer;
}
[part='toggle-button'] {
position: relative;
border: 0;
margin: calc((var(--lumo-icon-size-m) - var(--lumo-size-s)) / 2) 0;
margin-inline-end: calc(var(--lumo-space-xs) * -1);
padding: 0;
background: transparent;
font: inherit;
color: var(--lumo-tertiary-text-color);
width: var(--lumo-size-s);
height: var(--lumo-size-s);
cursor: var(--lumo-clickable-cursor, default);
transition: color 140ms;
}

@@ -62,7 +53,3 @@

[part='toggle-button']::before {
font-family: lumo-icons;
content: var(--lumo-icons-dropdown);
font-size: 1.5em;
line-height: var(--lumo-size-s);
display: inline-block;
transform: rotate(-90deg);

@@ -99,6 +86,7 @@ transition: transform 140ms;

padding: 0.1em;
flex-shrink: 0;
color: var(--lumo-contrast-60pct);
}
:host([active]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
:host([current]) slot[name='prefix']::slotted(:is(vaadin-icon, [class*='icon'])) {
color: inherit;

@@ -115,3 +103,3 @@ }

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

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

registerStyles('vaadin-side-nav-item', sideNavItemStyles, { moduleId: 'lumo-side-nav-item' });
registerStyles('vaadin-side-nav-item', [fieldButton, sideNavItemStyles], { moduleId: 'lumo-side-nav-item' });

3

theme/material/vaadin-side-nav.js

@@ -6,3 +6,4 @@ /**

*/
import './vaadin-side-nav-item.js';
import './vaadin-side-nav-styles.js';
import '../../src/vaadin-side-nav.js';
import '../../src/vaadin-side-nav-item.js';

41

web-types.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/side-nav",
"version": "24.2.0-alpha1",
"version": "24.2.0-alpha2",
"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```\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.",
"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\nThe following shadow DOM parts are available for 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\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

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

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

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

{
"name": "i18n",
"description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n toggle: 'Toggle child items'\n}\n```",
"value": {
"type": [
"SideNavI18n"
]
}
},
{
"name": "path",

@@ -74,8 +72,6 @@ "description": "The path to navigate to",

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

@@ -104,3 +100,3 @@ }

"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```\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.",
"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\nThe following shadow DOM parts are available for 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\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [

@@ -140,2 +136,11 @@ {

{
"name": "i18n",
"description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n toggle: 'Toggle child items'\n}\n```",
"value": {
"type": [
"SideNavI18n"
]
}
},
{
"name": "collapsible",

@@ -142,0 +147,0 @@ "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",

22

web-types.lit.json
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/side-nav",
"version": "24.2.0-alpha1",
"version": "24.2.0-alpha2",
"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```\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.",
"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\nThe following shadow DOM parts are available for 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\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`expanded` | Set when the element is expanded.\n`has-children` | Set when the element has child items.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

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

{
"name": ".i18n",
"description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n toggle: 'Toggle child items'\n}\n```",
"value": {
"kind": "expression"
}
},
{
"name": ".path",

@@ -40,3 +47,3 @@ "description": "The path to navigate to",

"name": ".pathAliases",
"description": "A comma-separated list of alternative paths matching this item.",
"description": "The list of alternative paths matching this item",
"value": {

@@ -57,3 +64,3 @@ "kind": "expression"

"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```\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.",
"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\nThe following shadow DOM parts are available for 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\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------|-------------\n`collapsed` | Set when the element is collapsed.\n`focus-ring` | Set when the label is focused using the keyboard.\n`focused` | Set when the label is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"extension": true,

@@ -76,2 +83,9 @@ "attributes": [

{
"name": ".i18n",
"description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n toggle: 'Toggle child items'\n}\n```",
"value": {
"kind": "expression"
}
},
{
"name": "@collapsed-changed",

@@ -78,0 +92,0 @@ "description": "Fired when the `collapsed` property changes.",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc