SideNavStyling.java
package com.vaadin.demo.component.sidenav;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.sidenav.SideNav;
import com.vaadin.flow.component.sidenav.SideNavItem;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.component.sidenav.views.DashboardView;
import com.vaadin.demo.component.sidenav.views.InboxView;
@Route("side-nav-styling")
public class SideNavStyling extends Div {
public SideNavStyling() {
// tag::snippet[]
SideNav nav = new SideNav();
SideNavItem dashboardLink = new SideNavItem("Dashboard",
DashboardView.class, VaadinIcon.DASHBOARD.create());
SideNavItem inboxLink = new SideNavItem("Inbox", InboxView.class,
VaadinIcon.ENVELOPE.create());
SideNavItem vaadinLink = new SideNavItem("Vaadin website",
"https://vaadin.com", VaadinIcon.VAADIN_H.create());
vaadinLink.addClassName("external");
nav.addItem(dashboardLink, inboxLink, vaadinLink);
// end::snippet[]
Div navWrapper = new Div(nav);
nav.setWidthFull();
add(navWrapper);
this.addClassName("side-nav-sample");
}
}
nav-item-styling.css
/* tag::snippet[] */
/* Add this to your global CSS, for example in: */
/* frontend/theme/[my-theme]/styles.css */
vaadin-side-nav-item.external::part(link) {
color: var(--lumo-primary-text-color);
}
vaadin-side-nav-item.external > vaadin-icon {
color: var(--lumo-primary-color);
}
vaadin-side-nav-item.external::part(link):hover {
color: var(--lumo-primary-text-color);
text-decoration: underline;
}
/* end::snippet[] */
/* Styles for vaadin-side-nav documentation UI examples: */
.side-nav-sample {
overflow: hidden;
background: var(--lumo-shade-5pct, var(--vaadin-background-container));
}
.side-nav-sample > * {
background: var(--vaadin-background-color);
box-shadow: var(--lumo-box-shadow-s, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
padding: var(--vaadin-padding-m);
width: 15em;
}
side-nav-styling.tsx
import '@vaadin/icons';
import React, { useEffect, useRef } from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { SideNav, type SideNavElement } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
function Example() {
const sideNavRef = useRef<SideNavElement>(null);
useEffect(() => {
if (sideNavRef.current) {
// Example-specific workaround
patchSideNavNavigation(sideNavRef.current);
}
}, [sideNavRef.current]);
return (
<div className="side-nav-sample">
<div>
{/* tag::snippet[] */}
<SideNav style={{ width: '100%' }} ref={sideNavRef}>
<SideNavItem path="/dashboard">
<Icon icon="vaadin:dashboard" slot="prefix" />
Dashboard
</SideNavItem>
<SideNavItem path="/inbox">
<Icon icon="vaadin:envelope" slot="prefix" />
Inbox
</SideNavItem>
<SideNavItem path="https://vaadin.com" className="external">
<Icon icon="vaadin:vaadin-h" slot="prefix" />
Vaadin website
</SideNavItem>
</SideNav>
{/* end::snippet[] */}
</div>
</div>
);
}
nav-item-styling.css
/* tag::snippet[] */
/* Add this to your global CSS, for example in: */
/* frontend/theme/[my-theme]/styles.css */
vaadin-side-nav-item.external::part(link) {
color: var(--lumo-primary-text-color);
}
vaadin-side-nav-item.external > vaadin-icon {
color: var(--lumo-primary-color);
}
vaadin-side-nav-item.external::part(link):hover {
color: var(--lumo-primary-text-color);
text-decoration: underline;
}
/* end::snippet[] */
/* Styles for vaadin-side-nav documentation UI examples: */
.side-nav-sample {
overflow: hidden;
background: var(--lumo-shade-5pct, var(--vaadin-background-container));
}
.side-nav-sample > * {
background: var(--vaadin-background-color);
box-shadow: var(--lumo-box-shadow-s, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
padding: var(--vaadin-padding-m);
width: 15em;
}
side-nav-styling.ts
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/side-nav';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
@customElement('side-nav-styling')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override render() {
return html`
<div class="side-nav-sample">
<div>
<!-- tag::snippet[] -->
<vaadin-side-nav style="width:100%">
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Dashboard
</vaadin-side-nav-item>
<vaadin-side-nav-item path="/inbox">
<vaadin-icon icon="vaadin:envelope" slot="prefix"></vaadin-icon>
Inbox
</vaadin-side-nav-item>
<vaadin-side-nav-item path="https://vaadin.com" class="external">
<vaadin-icon icon="vaadin:vaadin-h" slot="prefix"></vaadin-icon>
Vaadin website
</vaadin-side-nav-item>
</vaadin-side-nav>
<!-- end::snippet[] -->
</div>
</div>
`;
}
}
nav-item-styling.css
/* tag::snippet[] */
/* Add this to your global CSS, for example in: */
/* frontend/theme/[my-theme]/styles.css */
vaadin-side-nav-item.external::part(link) {
color: var(--lumo-primary-text-color);
}
vaadin-side-nav-item.external > vaadin-icon {
color: var(--lumo-primary-color);
}
vaadin-side-nav-item.external::part(link):hover {
color: var(--lumo-primary-text-color);
text-decoration: underline;
}
/* end::snippet[] */
/* Styles for vaadin-side-nav documentation UI examples: */
.side-nav-sample {
overflow: hidden;
background: var(--lumo-shade-5pct, var(--vaadin-background-container));
}
.side-nav-sample > * {
background: var(--vaadin-background-color);
box-shadow: var(--lumo-box-shadow-s, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
padding: var(--vaadin-padding-m);
width: 15em;
}