New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/side-nav

Package Overview
Dependencies
Maintainers
12
Versions
198
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-alpha10

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

14

package.json
{
"name": "@vaadin/side-nav",
"version": "24.2.0-alpha1",
"version": "24.2.0-alpha10",
"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-alpha10",
"@vaadin/vaadin-lumo-styles": "24.2.0-alpha10",
"@vaadin/vaadin-material-styles": "24.2.0-alpha10",
"@vaadin/vaadin-themable-mixin": "24.2.0-alpha10",
"lit": "^2.0.0"

@@ -47,3 +47,3 @@ },

"@esm-bundle/chai": "^4.3.4",
"@vaadin/testing-helpers": "^0.4.2",
"@vaadin/testing-helpers": "^0.5.0",
"lit": "^2.0.0",

@@ -56,3 +56,3 @@ "sinon": "^13.0.2"

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

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 @@

28

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

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

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

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

:host([disabled]) {
pointer-events: none;
}
[part='content'] {
display: flex;
align-items: center;
}
[part='link'] {

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

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

@@ -46,15 +61,2 @@

:host(:not([path])) a {
position: relative;
}
:host(:not([path])) button::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
slot[name='prefix'],

@@ -61,0 +63,0 @@ slot[name='suffix'] {

24

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

@@ -7,5 +7,7 @@ /**

import { LitElement } from 'lit';
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';

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

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

@@ -68,2 +72,10 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* ---------------|-------------
* `disabled` | Set when the element is disabled.
* `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 +85,5 @@ *

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

@@ -81,7 +95,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 +110,3 @@ /**

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

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

115

src/vaadin-side-nav-item.js

@@ -8,8 +8,10 @@ /**

import { ifDefined } from 'lit/directives/if-defined.js';
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.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 +23,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 +60,4 @@ * Not intended to be used separately.

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

@@ -91,2 +70,10 @@ * ----------------|----------------

*
* The following state attributes are available for styling:
*
* Attribute | Description
* ---------------|-------------
* `disabled` | Set when the element is disabled.
* `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.

@@ -99,5 +86,7 @@ *

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

@@ -115,7 +104,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 +133,3 @@ /**

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

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

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

@@ -159,3 +151,3 @@

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

@@ -173,4 +165,3 @@

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

@@ -192,6 +183,11 @@ // 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);
// Ensure all the child items are disabled
if (props.has('disabled') || props.has('_itemsCount')) {
this._items.forEach((item) => {
item.disabled = this.disabled;
});
}
}

@@ -202,5 +198,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 +207,3 @@

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

@@ -219,3 +215,10 @@

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

@@ -227,11 +230,13 @@ <slot></slot>

part="toggle-button"
?disabled="${this.disabled}"
@click="${this._onButtonClick}"
aria-controls="children"
aria-expanded="${this.expanded}"
aria-label="Toggle child items"
aria-labelledby="link i18n"
></button>
</div>
<ul part="children" ?hidden="${!this.expanded}">
<ul part="children" role="list" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
<slot name="children"></slot>
</ul>
<div class="sr-only" id="i18n">${this.i18n.toggle}</div>
`;

@@ -262,25 +267,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))
);

@@ -287,0 +284,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.

34

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,

@@ -138,2 +161,3 @@ // the role attribute is set to "navigation".

aria-expanded="${ifDefined(this.collapsible ? !this.collapsed : null)}"
aria-hidden="${ifDefined(this.collapsible === false ? true : null)}"
aria-controls="children"

@@ -144,3 +168,9 @@ >

</button>
<ul id="children" part="children" ?hidden="${this.collapsed}" aria-hidden="${this.collapsed ? 'true' : 'false'}">
<ul
id="children"
role="list"
part="children"
?hidden="${this.collapsed}"
aria-hidden="${this.collapsed ? 'true' : 'false'}"
>
<slot></slot>

@@ -147,0 +177,0 @@ </ul>

42

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,14 @@ width: 100%;

[part='link'][href] {
cursor: pointer;
}
:host([disabled]) [part='link'] {
color: var(--lumo-disabled-text-color);
}
[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 +57,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);

@@ -72,2 +63,6 @@ transition: transform 140ms;

:host([dir='rtl']) [part='toggle-button']::before {
transform: rotate(90deg);
}
:host([expanded]) [part='toggle-button']::before {

@@ -100,6 +95,11 @@ transform: none;

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

@@ -116,3 +116,3 @@ }

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

@@ -123,2 +123,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' });

7

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

@@ -58,2 +58,3 @@ import '@vaadin/vaadin-lumo-styles/color.js';

content: var(--lumo-icons-angle-right);
transition: transform 140ms;
}

@@ -65,6 +66,10 @@

:host(:not([collapsed])) [part='toggle-button'] {
:host(:not([collapsed])) [part='toggle-button']::before {
transform: rotate(90deg);
}
:host([collapsed][dir='rtl']) [part='toggle-button']::before {
transform: rotate(180deg);
}
@media (any-hover: hover) {

@@ -71,0 +76,0 @@ [part='label']:hover [part='toggle-button'] {

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';

51

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

@@ -11,10 +11,10 @@ "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`disabled` | Set when the element is disabled.\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": [
{
"name": "path",
"description": "The path to navigate to",
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"string",
"boolean",
"null",

@@ -26,4 +26,4 @@ "undefined"

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

@@ -61,2 +61,22 @@ "type": [

{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"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 +94,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 +122,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 +158,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 +169,0 @@ "description": "Whether the side nav is collapsible. When enabled, the toggle icon is shown.",

29

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

@@ -19,6 +19,13 @@ "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`disabled` | Set when the element is disabled.\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,
"attributes": [
{
"name": "?disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"kind": "expression"
}
},
{
"name": "?expanded",

@@ -31,2 +38,9 @@ "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": {
"kind": "expression"
}
},
{
"name": ".path",

@@ -40,3 +54,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 +71,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 +90,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 +99,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