# @zanichelli/zanichelli-appswitcher

> Zanichelli Appswitcher Component

Latest version **3.0.5** (published 2026-07-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zanichelli/zanichelli-appswitcher
pnpm add @zanichelli/zanichelli-appswitcher
yarn add @zanichelli/zanichelli-appswitcher
bun add @zanichelli/zanichelli-appswitcher
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2026-07-10 |
| First published | 2022-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 752.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alessandrodolci, amalferpoma, ooga9k, edocava, a-sartori-wt, mikelina, nitroin, saldomik, vpasquino, dariosacco, paolofrancesco-marino, gretalucchina, f.santi, nicolo.carpignoli, leonardogiaconemondora, davideda, francescochiapella, alessandramartera, cmalvispx, developers_zanichelli, veronica.van, veronicavannini, alessandro_zuddas, alicegambdevs, lorenzoemanuele, attraverso, nliggeri |

## Links

- npm: https://www.npmjs.com/package/@zanichelli/zanichelli-appswitcher
- Repository: https://bitbucket.org/zanichelli/zanichelli-appswitcher
- Homepage: https://bitbucket.org/zanichelli/zanichelli-appswitcher#readme
- Issues: https://bitbucket.org/zanichelli/zanichelli-appswitcher/issues
- npm.io page: https://npm.io/package/@zanichelli/zanichelli-appswitcher

## Dependencies (1)

- [@stencil/core](https://npm.io/package/@stencil/core.md) ^2.13.0

## Recent versions

- 3.0.5 (latest) — 2026-07-10
- 3.0.2-RC (3.0.2-RC) — 2025-02-18
- 2.0.5-RC3 (2.4.4-RC3) — 2025-02-13
- 2.0.5-RC2 (2.0.5-RC2) — 2025-02-13
- 2.0.5-RC1 (2.0.5-RC1) — 2025-02-13
- 2.0.3-RC-1 (2.0.3-RC-1) — 2024-12-10
- 2.0.3-RC (2.0.3-RC) — 2024-12-06
- 2.0.2-rc (area-siti-laz) — 2024-12-03
- 2.0.1-RC (2.0.1-RC1) — 2024-11-25
- 2.0.0-RC14 (2.0.0-RC14) — 2024-11-12
- 2.0.0-RC13 (2.0.0-RC13) — 2024-11-11
- 2.0.0-RC12 (2.0.0-RC12) — 2024-11-11
- 2.0.0-RC11 (2.0.0-RC11) — 2024-11-11
- 2.0.0-RC10 (2.0.0-RC10) — 2024-11-11
- 2.0.0-RC9 (2.0.0-RC9) — 2024-11-11
- … 89 more at https://npm.io/package/@zanichelli/zanichelli-appswitcher/versions

## README

# Zanichelli AppSwitcher Component

Use this component to allow a user to easily navigate between Zanichelli's web applications.

### **Installation**

Download the package by running `yarn add @zanichelli/zanichelli-appswitcher` or import it in your html using Unpkg:

```html
<script type="module" src="https://unpkg.com/@zanichelli/zanichelli-appswitcher"></script>
```

---

### **Albe Web Components dependency**

This component requires the Albe Web Components Library. To get Albe you can:

- install it via [NPM](https://github.com/ZanichelliEditore/design-system) by running `yarn add @zanichelli/albe-web-components`
- include it in your app inside a `script` tag:

```html
<script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>
```

Remember to also include the stylesheet:

```html
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />
```

---

### **Using custom elements**

```jsx
import { defineCustomElements as defineAlbeComponents } from '@zanichelli/albe-web-components/loader';
import { defineCustomElements as defineZanichelliAppswitcher } from '@zanichelli/zanichelli-appswitcher/dist/wc/loader';

useEffect(() => {
  defineAlbeComponents();
  defineZanichelliAppswitcher();
}, []);

return (
  <>
    <zanichelli-appswitcher />
    <zanichelli-apps-section />
  </>
);
```

---

### **Using React Bindings**

```jsx
import { ZanichelliAppswitcher, ZanichelliAppsSection } from '@zanichelli/zanichelli-appswitcher/dist/react/components';

return (
  <>
    <ZanichelliAppswitcher />
    <ZanichelliAppsSection />
  </>
);
```

---

### **Development**

- Download the repo using `git clone git@bitbucket.org:zanichelli/zanichelli-appswitcher.git`
- In the project's root folder, run `yarn inst`
- add `127.0.0.1 info.zanichelli.it` to the list in your /etc/hosts file
- `cd` into your web-component-library folder, then run `yarn build` and `yarn start`

If you need to work with a local copy of the Albe Web Components Library

- Download the Albe repo using `git clone git@github.com:ZanichelliEditore/design-system.git`
- In the root folder of this new project, run `yarn build` and then `yarn link`
- In your zanichelli-appswitcher project, uncomment the import in `web-component-library/src/components/zanichelli-appswitcher/zanichelli-appswitcher.tsx`

---

### **Testing**

You can launch the available tests using `yarn test`.

---

### **Zanichelli AppSwitcher - Props & Slots**

- By default the component has a transparent background.

This component accepts the following props:

- `current-host`: Custom host name to be registered if the default is misleading.
- `env`: Defines the usage environment to retrieve the `config.json`. Available values: `local`, `staging`, `prod`, `admin`, `localadmin`.
- `user-object`: The user's data as retrieved from a valid Zanichelli IDP token.
- `teaching-groups`: The teaching groups of the currently logged-in user, if any.
- `config-object`: For use with the configurator app only: AppSwitcher current configuration.
- `offcanvas-open`: For use with the configurator app only: Whether the offcanvas should start as already open.
- `offcanvas-type`: For use with the configurator app only: Type of the offcanvas. Defaults to 'overlay'.

### **Zanichelli Section Apps - Props & Slots**

This component accepts the following props:

- `env`: Defines the usage environment to retrieve the `config.json`. Available values: `local`, `staging`, `prod`. Mapped through `env` enum.
- `show-header-info`: Displays the header info box.
- `header-info-txt`: Header info text.
- `header-btn-href`: Header button href.
- `header-btn-txt`: Header button text.
- `top-heading-level`: Defaults to 2. Highest level of heading in the section. All others cascade from there. After h6, elements will be converted to `<p>`.

**You can choose one of these two ways of passing user information to the component (one excludes the other):**

- `idp-payload`: The payload of the `idp-login-component` coming from the `loginSuccess` or `userLoaded` event.

**or**

- `user-role`: The role of the user (e.g., MYZ_TEACHER, MYZ_STUDENT) mapped through userRoleName enum. If your user roles mapping is different think about remapping them :)
- `teaching-groups`: The teaching groups associated with the logged-in teacher.
- `user-id`: Id of the user - used in xapi statement

### Enums

```typescript
enum UserRoleName {
  ANONYMOUS = 'ANONYMOUS',
  MYZ_ADMIN = 'MYZ_ADMIN',
  MYZ_UTENTE = 'MYZ_UTENTE',
  MYZ_STUDENTE = 'MYZ_STUDENTE',
  MYZ_DOCENTE = 'MYZ_DOCENTE',
  MYZ_PRODUZIONE = 'MYZ_PRODUZIONE',
  MYZ_FUNZIONARIO = 'MYZ_FUNZIONARIO',
  MYZ_RESP_EDITORIALE = 'MYZ_RESP_EDITORIALE',
  MYZ_ASSISTENZA_CD = 'MYZ_ASSISTENZA_CD',
  MYZ_DOCENTE_UNIVERSITARIO = 'MYZ_DOCENTE_UNIVERSITARIO',
  MYZ_STUDENTE_UNIVERSITARIO = 'MYZ_STUDENTE_UNIVERSITARIO',
  MYZ_VENDITE = 'MYZ_VENDITE',
  MYZ_PROFESSIONISTA = 'MYZ_PROFESSIONISTA',
}

enum envType {
  PROD = 'prod',
  STAGING = 'staging',
  LOCAL = 'local',
  ADMIN = 'admin',
  LOCALADMIN = 'localadmin',
}
```

---
_Source: https://npm.io/package/@zanichelli/zanichelli-appswitcher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._