Secondary Menu

Usage

import {
  SecondaryMenu,
  SecondaryMenuGroup,
  SecondaryMenuItem,
  SecondaryMenuContent,
  SecondaryMenuHeader,
  SecondaryMenuFooter,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple secondary menu with text items.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';

export function SecondaryMenuBasic() {
  const [activeItem, setActiveItem] = useState('dashboard');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '400px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup>
            <SecondaryMenuItem
              active={activeItem === 'dashboard'}
              onClick={() => setActiveItem('dashboard')}
            >
              Dashboard
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'analytics'}
              onClick={() => setActiveItem('analytics')}
            >
              Analytics
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'reports'}
              onClick={() => setActiveItem('reports')}
            >
              Reports
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'settings'}
              onClick={() => setActiveItem('settings')}
            >
              Settings
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

With Icons

Menu items with leading icons.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';
import {
  BellIcon,
  HomeFolderIcon,
  MailIcon,
  SettingsIcon,
  UserIcon,
} from '@acronis-platform/shadcn-uikit';
export function SecondaryMenuWithIcons() {
  const [activeItem, setActiveItem] = useState('home');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '400px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup>
            <SecondaryMenuItem
              active={activeItem === 'home'}
              onClick={() => setActiveItem('home')}
              icon={<HomeFolderIcon className="h-4 w-4" />}
            >
              Home
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'profile'}
              onClick={() => setActiveItem('profile')}
              icon={<UserIcon className="h-4 w-4" />}
            >
              Profile
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'notifications'}
              onClick={() => setActiveItem('notifications')}
              icon={<BellIcon className="h-4 w-4" />}
            >
              Notifications
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'messages'}
              onClick={() => setActiveItem('messages')}
              icon={<MailIcon className="h-4 w-4" />}
            >
              Messages
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'config'}
              onClick={() => setActiveItem('config')}
              icon={<SettingsIcon className="h-4 w-4" />}
            >
              Configuration
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

With Groups

Menu items organized into labeled groups.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';
import {
  DownloadIcon,
  EditIcon,
  FileTextIcon,
  ImageIcon,
  TrashOIcon,
  UploadIcon,
  VideosIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
export function SecondaryMenuWithGroups() {
  const [activeItem, setActiveItem] = useState('documents');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '500px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup title="Content">
            <SecondaryMenuItem
              active={activeItem === 'documents'}
              onClick={() => setActiveItem('documents')}
              icon={<FileTextIcon className="h-4 w-4" />}
            >
              Documents
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'images'}
              onClick={() => setActiveItem('images')}
              icon={<ImageIcon className="h-4 w-4" />}
            >
              Images
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'videos'}
              onClick={() => setActiveItem('videos')}
              icon={<VideosIcon className="h-4 w-4" />}
            >
              Videos
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'audio'}
              onClick={() => setActiveItem('audio')}
              icon={<MusicIcon className="h-4 w-4" />}
            >
              Audio Files
            </SecondaryMenuItem>
          </SecondaryMenuGroup>

          <SecondaryMenuGroup title="Actions">
            <SecondaryMenuItem
              active={activeItem === 'upload'}
              onClick={() => setActiveItem('upload')}
              icon={<UploadIcon className="h-4 w-4" />}
            >
              Upload
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'download'}
              onClick={() => setActiveItem('download')}
              icon={<DownloadIcon className="h-4 w-4" />}
            >
              Download
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'edit'}
              onClick={() => setActiveItem('edit')}
              icon={<EditIcon className="h-4 w-4" />}
            >
              Edit
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'delete'}
              onClick={() => setActiveItem('delete')}
              icon={<TrashOIcon className="h-4 w-4" />}
            >
              Delete
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

With Tags

Menu items displaying status tags.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';

export function SecondaryMenuWithTags() {
  const [activeItem, setActiveItem] = useState('feature1');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '400px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup title="Features">
            <SecondaryMenuItem
              active={activeItem === 'feature1'}
              onClick={() => setActiveItem('feature1')}
            >
              Dashboard
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'feature2'}
              onClick={() => setActiveItem('feature2')}
              tag="NEW"
            >
              Analytics
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'feature3'}
              onClick={() => setActiveItem('feature3')}
              tag="BETA"
            >
              AI Assistant
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'feature4'}
              onClick={() => setActiveItem('feature4')}
            >
              Reports
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

With Right Icons

Menu items with icons positioned on the right.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';
import { ChevronRightIcon } from '@acronis-platform/shadcn-uikit';
export function SecondaryMenuWithRightIcons() {
  const [activeItem, setActiveItem] = useState('nav1');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '400px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup title="Navigation">
            <SecondaryMenuItem
              active={activeItem === 'nav1'}
              onClick={() => setActiveItem('nav1')}
              icon={<ChevronRightIcon className="h-4 w-4" />}
              iconPosition="right"
            >
              General Settings
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'nav2'}
              onClick={() => setActiveItem('nav2')}
              icon={<ChevronRightIcon className="h-4 w-4" />}
              iconPosition="right"
            >
              Privacy & Security
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'nav3'}
              onClick={() => setActiveItem('nav3')}
              icon={<ChevronRightIcon className="h-4 w-4" />}
              iconPosition="right"
            >
              Notifications
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'nav4'}
              onClick={() => setActiveItem('nav4')}
              icon={<ChevronRightIcon className="h-4 w-4" />}
              iconPosition="right"
            >
              Appearance
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

With Disabled

Menu with some items in a disabled state.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
} from '@acronis-platform/shadcn-uikit/react';
import {
  FileTextIcon,
  ImageIcon,
  VideosIcon,
} from '@acronis-platform/shadcn-uikit';
import { MusicIcon } from '../icons/missing-icons';
export function SecondaryMenuWithDisabled() {
  const [activeItem, setActiveItem] = useState('opt1');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '400px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuContent>
          <SecondaryMenuGroup title="Options">
            <SecondaryMenuItem
              active={activeItem === 'opt1'}
              onClick={() => setActiveItem('opt1')}
              icon={<FileTextIcon className="h-4 w-4" />}
            >
              Available Option
            </SecondaryMenuItem>
            <SecondaryMenuItem
              disabled
              icon={<ImageIcon className="h-4 w-4" />}
            >
              Disabled Option
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'opt3'}
              onClick={() => setActiveItem('opt3')}
              icon={<VideosIcon className="h-4 w-4" />}
            >
              Another Available
            </SecondaryMenuItem>
            <SecondaryMenuItem
              disabled
              icon={<MusicIcon className="h-4 w-4" />}
            >
              Coming Soon
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>
      </SecondaryMenu>
    </div>
  );
}

Complete

A full-featured secondary menu with header, groups, and footer.

View source

import { useState } from 'react';
import {
  SecondaryMenu,
  SecondaryMenuContent,
  SecondaryMenuGroup,
  SecondaryMenuItem,
  SecondaryMenuHeader,
  SecondaryMenuFooter,
} from '@acronis-platform/shadcn-uikit/react';
import { Button } from '@acronis-platform/shadcn-uikit/react';

import {
  DownloadIcon,
  FileTextIcon,
  ImageIcon,
  UploadIcon,
} from '@acronis-platform/shadcn-uikit';
export function SecondaryMenuComplete() {
  const [activeItem, setActiveItem] = useState('recent1');

  return (
    <div
      className="border rounded-lg overflow-hidden"
      style={{ height: '500px' }}
    >
      <SecondaryMenu>
        <SecondaryMenuHeader>
          <h3 className="text-sm font-semibold text-[#243143]">File Manager</h3>
        </SecondaryMenuHeader>

        <SecondaryMenuContent>
          <SecondaryMenuGroup title="Recent">
            <SecondaryMenuItem
              active={activeItem === 'recent1'}
              onClick={() => setActiveItem('recent1')}
              icon={<FileTextIcon className="h-4 w-4" />}
            >
              Project Proposal
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'recent2'}
              onClick={() => setActiveItem('recent2')}
              icon={<ImageIcon className="h-4 w-4" />}
            >
              Design Mockups
            </SecondaryMenuItem>
          </SecondaryMenuGroup>

          <SecondaryMenuGroup title="Folders">
            <SecondaryMenuItem
              active={activeItem === 'folder1'}
              onClick={() => setActiveItem('folder1')}
              icon={<FileTextIcon className="h-4 w-4" />}
              iconPosition="left"
            >
              Documents
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'folder2'}
              onClick={() => setActiveItem('folder2')}
              icon={<ImageIcon className="h-4 w-4" />}
            >
              Media
            </SecondaryMenuItem>
            <SecondaryMenuItem
              active={activeItem === 'folder3'}
              onClick={() => setActiveItem('folder3')}
              icon={<DownloadIcon className="h-4 w-4" />}
            >
              Downloads
            </SecondaryMenuItem>
          </SecondaryMenuGroup>
        </SecondaryMenuContent>

        <SecondaryMenuFooter>
          <Button variant="outline" size="sm" className="w-full">
            <UploadIcon className="mr-2 h-4 w-4" />
            Upload Files
          </Button>
        </SecondaryMenuFooter>
      </SecondaryMenu>
    </div>
  );
}

Specs

Design specification overview.

View source

export function SecondaryMenuSpecs() {
  return (
    <div className="space-y-3 text-sm">
      <div>
        <strong className="font-semibold">Width:</strong> 240px (fixed)
      </div>
      <div>
        <strong className="font-semibold">Padding:</strong> 24px horizontal,
        12px vertical
      </div>
      <div>
        <strong className="font-semibold">Title Padding:</strong> 24px
        horizontal, 16px top, 8px bottom
      </div>
      <div>
        <strong className="font-semibold">Gap:</strong> 16px between icon and
        text
      </div>
      <div>
        <strong className="font-semibold">Icon Size:</strong> 16×16px
      </div>
      <div>
        <strong className="font-semibold">Active Background:</strong> rgba(38,
        104, 197, 0.05)
      </div>
      <div>
        <strong className="font-semibold">Divider:</strong> rgba(38, 104, 197,
        0.1)
      </div>
      <div>
        <strong className="font-semibold">Typography:</strong>
        <ul className="ml-4 mt-1 space-y-1">
          <li>Menu Item: Inter Semi Bold, 14px, 24px line-height</li>
          <li>Title: Inter Bold, 11px, 16px line-height, uppercase</li>
        </ul>
      </div>
      <div>
        <strong className="font-semibold">Colors:</strong>
        <ul className="ml-4 mt-1 space-y-1">
          <li>Default: #2668C5 (Technical/fixed-link)</li>
          <li>Active: #243143 (Text/fixed-primary)</li>
          <li>Disabled: rgba(36, 49, 67, 0.7)</li>
        </ul>
      </div>
    </div>
  );
}

API Reference

SecondaryMenu

Prop

Type

SecondaryMenuGroup

Prop

Type

SecondaryMenuItem

Prop

Type

SecondaryMenuContent, SecondaryMenuHeader, and SecondaryMenuFooter accept standard HTML div attributes.

Edit on GitHub

Secondary Menu

On this page