# @vaadin-component-factory/vcf-nav
> Vaadin Component Factory component for navigation menus. This component is a stepping stone towards an official Vaadin component. Please provide feedback through issues in this repository.
Latest version **1.1.3** (published 2023-07-07) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @vaadin-component-factory/vcf-nav
pnpm add @vaadin-component-factory/vcf-nav
yarn add @vaadin-component-factory/vcf-nav
bun add @vaadin-component-factory/vcf-nav
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.3 |
| Published | 2023-07-07 |
| First published | 2022-06-30 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 29.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | artur-, tatulund, wajtrvaadin, ingmartinlopez, paodb, jcgueriaud, vcf, jouni, onuridrisoglu, niiyeboah |
| Keywords | vaadin |
## Links
- npm: https://www.npmjs.com/package/@vaadin-component-factory/vcf-nav
- Repository: https://github.com/vaadin/vcf-nav
- Issues: https://github.com/vaadin/vcf-nav/issues
- npm.io page: https://npm.io/package/@vaadin-component-factory/vcf-nav
## Dependencies (2)
- [lit](https://npm.io/package/lit.md) ^v2.0.0
- [@vaadin/vaadin-lumo-styles](https://npm.io/package/@vaadin/vaadin-lumo-styles.md) ^v23.0.0
## Recent versions
- 1.1.3 (latest) — 2023-07-07
- 1.1.2 — 2023-06-08
- 1.1.1 — 2023-03-28
- 1.1.0 — 2023-03-06
- 1.0.7 — 2023-03-06
- 1.0.6 — 2022-07-06
- 1.0.5 — 2022-07-06
- 1.0.4 — 2022-07-05
- 1.0.3 — 2022-06-30
- 1.0.2 — 2022-06-30
- 1.0.1 — 2022-06-30
- 1.0.0 — 2022-06-30
## README
# vcf-nav
Vaadin Component Factory component for navigation menus. This component is a stepping stone towards an official Vaadin component. Please provide feedback through issues in this repository.
## Features
- Navigation with a label can be collapsible
- Navigation items can have prefix and suffix content, for example, icons and badges
- Hierarchial items. A parent item can be without a path (non-navigable)
- Supports keyboard and screen reader navigation
**Missing features (things that will be added in the official component):**
- Material theme
- Localization support (to provide a custom text for the expand/collapse button of a navigation item)
- TypeScript types
**Potential feature additions:**
- Horizontal variant (“navigation bar”), with sub-items in a popup
- Icon-only variant (“navigation rail”), with sub-items in a popup
- [[insert your idea]](https://github.com/vaadin/vcf-nav/issues)
## Usage
### HTML
```html
Main menu
Dashboard
2
Parent
Child 1
Child 2
```
### Java
> NOTE: The Java classes are not included in this repository. You can get them by downloading a starter project from [start.vaadin.com](https://start.vaadin.com).
```java
AppNav nav = new AppNav("Main menu");
nav.setCollapsible(true);
AppNavItem dashboard = new AppNavItem("Dashboard", "/dashboard");
dashboard.setIcon(new Icon(VaadinIcon.CHART));
Span newItems = new Span("2");
newItems.getElement().setAttribute("aria-label", "(2 new items)");
newItems.getElement().getThemeList().add("badge primary");
newItems.getElement().setAttribute("slot", "suffix");
dashboard.getElement().appendChild(newItems.getElement());
AppNavItem parent = new AppNavItem("Parent");
parent.setIcon(new Icon(VaadinIcon.FOLDER_OPEN));
AppNavItem child1 = new AppNavItem("Child 1", "/child1");
AppNavItem child2 = new AppNavItem("Child 2", "/child2");
parent.addItem(child1, child2);
nav.addItem(dashboard, parent);
```
## Styling
This component does not utilize the Vaadin `ThemableMixin` interface, and therefore does not allow you to easily inject styles into its shadow DOM.
The component is meant to be styled using standard CSS features. Regular “light DOM” styling works for most things, and the `::part()` selector for more detailed styling.
**Example:**
`frontend/themes/[mytheme]/styles.css`
```css
html {
--vcf-nav-child-indent: var(--lumo-space-m);
}
vcf-nav {
padding: 0;
font-size: var(--lumo-font-size-m);
color: var(--lumo-body-text-color);
}
vcf-nav::part(label) {
text-transform: uppercase;
font-size: var(--lumo-font-size-xs);
}
vcf-nav-item::part(item) {
border-inline-start: 2px solid transparent;
}
vcf-nav-item[active]::part(item) {
border-inline-start-color: var(--lumo-primary-color);
}
```
### ``
#### Parts
`::part(label)`
The `` element that displays the label of the navigation menu.
`::part(label)::after`
The expand/collapse icon of the label element. Defaults to `var(--lumo-icons-dropdown)`.
#### State attributes
`[collapsible]`
Indicates that the navigation menu is user-collapsible and the pseudo element for the expand/collapse icon is visible.
`[collapsed]`
Indicates that the navigation menu has been collapsed and the navigation items are hidden.
### ``
> NOTE: the navigation item applies styles to any prefix element with a class name that contains `"icon"`, assuming all such elements are meant to be the item icon.
#### Parts
`::part(item)`
The `` element that contains the item label and prefix and suffix content.
`::part(toggle-button)`
The `