Skip to main content

Navigation

Vivid uses React Router under the hood for navigation. While routing is dynamically generated, you still need to configure sidebar navigation manually.

info

Automatic generation for sidebar navigation is planned for the future.

Example:

src/config.tsx
import type { NavigationEntry } from './router';
import { House, User } from '@phosphor-icons/react';

// ...

export const navigation: NavigationEntry[] = [
{
name: 'Home',
path: '/',
icon: <House weight="fill" size={24} />,
acl: {
action: 'read',
subject: 'other',
},
},
{
heading: 'Data',

name: 'Users',
path: '/data/user',
icon: <User weight="fill" size={24} />,
acl: false,
},
];

Navigation Preview