<vega-nav-card></vega-nav-card>
document.querySelector('vega-nav-card').source = [
{
type: 'section',
sectionHeader: {
title: 'section1',
actionTitle: 'EDIT',
},
children: [
{
type: 'group',
name: 'Dashboard',
children: [
{
type: 'link',
url: '',
name: 'subDashboard1',
counterBadge: { counter: 1 },
},
{
type: 'link',
url: '',
name: 'subDashboard2',
counterBadge: { counter: 2 },
},
],
},
{
type: 'link',
url: '',
name: 'Dashboard2',
selected: true,
counterBadge: { counter: 1 },
},
],
},
{
type: 'group',
name: 'Order Equipment',
icon: 'fas fa-shopping-bag',
children: [
{
type: 'link',
url: '',
name: 'Equipment',
counterBadge: { counter: 1 },
},
{
type: 'link',
url: '',
name: 'Equipment2',
},
],
},
{
type: 'link',
url: '',
name: 'Support',
icon: 'fas fa-file-alt',
},
];
The vega-nav-card is a variant of of the Left Navigation component which remains static on the page. It includes a scrollable list of links, but contains neither a header nor a footer. It may be displayed along with vega-left-nav for displaying more granular content.
| Name | Description | Default |
|---|---|---|
| source | The source of the data for the left navLeftNavSourceItem[] |
|
| max-height | Specifies the maximum height for the scrollable list within the component. Values may be entered in either numeric or string formats. If using numeric values, the number will indicate the height in pixels. For string values, you may use units such as vh or calc expressions. For example, “100vh” sets the height to 100% of the viewport height, and “calc(100vh - 20px)” allows for more complex calculations to determine the height. It may also be set as a responsive type. |
Note: For full usage instructions of the vega-nav-card, please refer to the Left Navigation component.