CSC Design System next
VueFlavour Vue React Angular TypeScript PrimaryCSC UI ColorsPrimarySecondaryAccentCustom ColorsRedOrangeGreenBluePurplePink
Guides Getting started Customization Data visualization Migration guide Componentsc-accordionc-alertc-autocompletec-badgec-buttonc-button-groupc-cardc-checkboxc-csc-logoc-data-tablec-dividerc-iconc-icon-buttonc-inputc-linkc-listc-loaderc-login-buttonsc-login-cardc-mainc-menuc-messagec-modalc-navigation-buttonc-otp-inputc-pagec-paginationc-popoverc-progress-barc-progress-circlec-radio-groupc-selectc-side-navigationc-sliderc-spinnerc-statusc-stepsc-switchc-tablec-tabsc-tagsc-text-fieldc-toastsc-toolbarc-tooltip

<c-side-navigation>

Examples

Basic
Vue React Angular TypeScript
<template>
  <div>
    <c-side-navigation>
      <c-side-navigation-title>My project</c-side-navigation-title>

      <c-side-navigation-item
        :active.prop="current === 'dashboard'"
        @item-change="current = 'dashboard'"
      >
        <c-icon :path="mdiViewDashboardOutline" />
        Dashboard
      </c-side-navigation-item>

      <c-side-navigation-item active>
        <c-icon :path="mdiFolderOutline" />
        Projects

        <c-sub-navigation-item
          :active.prop="current === 'active'"
          @click="current = 'active'"
          @keyup.enter="current = 'active'"
        >
          Active projects
        </c-sub-navigation-item>

        <c-sub-navigation-item
          :active.prop="current === 'archived'"
          @click="current = 'archived'"
          @keyup.enter="current = 'archived'"
        >
          Archived projects
        </c-sub-navigation-item>
      </c-side-navigation-item>

      <c-side-navigation-item href="https://csc.fi" target="_blank">
        <c-icon :path="mdiOpenInNew" />
        Service description
      </c-side-navigation-item>
    </c-side-navigation>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import {
  mdiFolderOutline,
  mdiOpenInNew,
  mdiViewDashboardOutline,
} from '@mdi/js';

const current = ref('active');
</script>
Basic · c-side-navigation-item
Vue React Angular TypeScript
<template>
  <div>
    <c-side-navigation>
      <c-side-navigation-item
        :active.prop="current === 'dashboard'"
        @item-change="current = 'dashboard'"
      >
        <c-icon :path="mdiViewDashboardOutline" />
        Dashboard
      </c-side-navigation-item>

      <c-side-navigation-item active>
        <c-icon :path="mdiFolderOutline" />
        Projects

        <c-sub-navigation-item
          :active.prop="current === 'active'"
          @click="current = 'active'"
          @keyup.enter="current = 'active'"
        >
          Active projects
        </c-sub-navigation-item>

        <c-sub-navigation-item
          :active.prop="current === 'archived'"
          @click="current = 'archived'"
          @keyup.enter="current = 'archived'"
        >
          Archived projects
        </c-sub-navigation-item>
      </c-side-navigation-item>

      <c-side-navigation-item href="https://csc.fi" target="_blank">
        <c-icon :path="mdiOpenInNew" />
        Service description
      </c-side-navigation-item>
    </c-side-navigation>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import {
  mdiFolderOutline,
  mdiOpenInNew,
  mdiViewDashboardOutline,
} from '@mdi/js';

const current = ref('dashboard');
</script>
Basic · c-side-navigation-title
Vue React Angular TypeScript
<template>
  <div>
    <c-side-navigation>
      <c-side-navigation-title>Services</c-side-navigation-title>

      <c-side-navigation-item>
        <c-icon :path="mdiDatabaseOutline" />
        Data storage
      </c-side-navigation-item>

      <c-side-navigation-item>
        <c-icon :path="mdiServerNetwork" />
        Computing
      </c-side-navigation-item>

      <c-side-navigation-title>Support</c-side-navigation-title>

      <c-side-navigation-item>
        <c-icon :path="mdiHelpCircleOutline" />
        User guides
      </c-side-navigation-item>
    </c-side-navigation>
  </div>
</template>

<script setup lang="ts">
import {
  mdiDatabaseOutline,
  mdiHelpCircleOutline,
  mdiServerNetwork,
} from '@mdi/js';
</script>
Basic · c-sub-navigation-item
Vue React Angular TypeScript
<template>
  <div>
    <c-side-navigation>
      <c-side-navigation-item active>
        <c-icon :path="mdiFolderOutline" />
        Projects

        <c-sub-navigation-item
          :active.prop="current === 'active'"
          @click="current = 'active'"
          @keyup.enter="current = 'active'"
        >
          Active projects
        </c-sub-navigation-item>

        <c-sub-navigation-item
          :active.prop="current === 'archived'"
          @click="current = 'archived'"
          @keyup.enter="current = 'archived'"
        >
          Archived projects
        </c-sub-navigation-item>

        <c-sub-navigation-item href="https://csc.fi" target="_blank">
          Service description
        </c-sub-navigation-item>
      </c-side-navigation-item>
    </c-side-navigation>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { mdiFolderOutline } from '@mdi/js';

const current = ref('active');
</script>

API reference

<c-side-navigation>

Properties

PropertyAttributeTypeDefaultDescription
menuVisiblemenu-visiblebooleanfalseMobile version menu visibility
mobilemobilebooleanfalseMobile version
styles—null | Record<string, string>nullBackground styles

Events

EventDetailDescription
change:menu-visiblebooleanFired when the drawer is closed from within (the mobile close button or the backdrop overlay), carrying the new visibility (`false`). Named `change:menu-visible`, not `update:menuVisible`: Vue's runtime silently drops `onUpdate:*` listeners on custom elements (`isModelListener`), so a template `@update:menu-visible` would never be attached.

Slots

SlotDescription
defaultDefault slot
bottomPlace items at the bottom

CSS parts

Style from outside with c-side-navigation::part(name) — parts are the library's only styling customization API.

PartDescription
rootThe outer drawer container
navThe scrollable `<nav>` element holding the navigation items

<c-side-navigation-item>

Properties

PropertyAttributeTypeDefaultDescription
activeactivebooleanfalseIndicate active state
focusablefocusablebooleantrueWhether the item is in the keyboard tab order — a parent item sets this to false on its collapsed sub-items so hidden items aren't Tab-reachable
hrefhrefstring''Hyperlink url
loadingloadingbooleanfalseLoading state
targettargetstring''Hyperlink target

Events

EventDetailDescription
itemChangeEventFired when the item is activated (click or Enter), carrying the originating DOM event; bubbles so the parent `<c-side-navigation>` can coordinate which item is active. Also dispatched as `item-change` — bind that name in Vue templates.

Slots

SlotDescription
defaultThe item's label content (text and an optional c-icon)
sub-itemNested c-side-navigation-item components; assigned automatically to nested items

CSS parts

Style from outside with c-side-navigation-item::part(name) — parts are the library's only styling customization API.

PartDescription
rootThe outer box wrapping the header and sub-navigation, carrying the background and state styling
headerThe clickable header row (an `<a>` when `href` is set) holding the chevron and label
sub-navThe collapsible `<nav>` container for the sub-items

<c-side-navigation-title>

Slots

SlotDescription
defaultThe title text of the navigation section

CSS parts

Style from outside with c-side-navigation-title::part(name) — parts are the library's only styling customization API.

PartDescription
rootThe outer wrapper around the label and the divider
labelThe uppercase section title label
divider-rootThe underline divider's root element, forwarded from the inner c-divider

<c-sub-navigation-item>

Properties

PropertyAttributeTypeDefaultDescription
activeactivebooleanfalseActive state
focusablefocusablebooleanfalseElement is visible and focusable
hrefhrefstring''Link url
loadingloadingbooleanfalseLoading state
targettargetstring''Link target

Slots

SlotDescription
defaultThe visible content of the navigation item

CSS parts

Style from outside with c-sub-navigation-item::part(name) — parts are the library's only styling customization API.

PartDescription
rootThe focusable menu-item row carrying the hover/active styling and the leading indicator
contentWrapper around the slotted content inside the row