Fuse React - NextJS

FuseNavigation

FuseNavigation is a custom-built Fuse component that allows you to create a multi-level collapsable navigation.

[navigation]

FuseNavigation uses an array to populate the entire navigation. It supports four different navigation items; Group, Collapse, Item. and Divider. These items can be mixed and matched to create unique and complex navigation layouts.

[layout]

"vertical" or "horizontal" layout options.

[active]

You can set active to "square" to use square active item style instead of rounded/circle for vertical layout.

[dense]

You can use dense={true} to set dense variation of the navigation.

[checkPermission]

You can use checkPermission={true} to enable authorization for navigation.

Usage

<FuseNavigation navigation={navigation} layout="vertical" active="square" dense={true}/>

Navigation item types

It is mandatory to give a unique id to all of your navigation items.

Group

{
  id: 'apps',
  title: 'Applications',
  subtitle: 'Custom made application designs',
  type: 'group',
  icon: 'heroicons-outline:home',
  children: [
    {
      id: 'apps.academy',
      title: 'Academy',
      type: 'item',
      icon: 'heroicons-outline:academic-cap',
      url: '/apps/academy',
    }
  ]

Collapse

{
    id: 'apps.ecommerce',
    title: 'ECommerce',
    type: 'collapse',
    icon: 'heroicons-outline:shopping-cart',
    children: [
      {
        id: 'e-commerce-products',
        title: 'Products',
        type: 'item',
        url: 'apps/e-commerce/products',
        end: true,
      },
  ]
}

Item

{
   id: 'dashboards.project',
   title: 'Project',
   type: 'item',
   icon: 'heroicons-outline:clipboard-check',
   url: '/dashboards/project',
 }

end: bool

When true, the active class/style will only be applied if the location is exactly matched.

{
    id: 'dashboards.project',
    title: 'Project',
    type: 'item',
    icon: 'heroicons-outline:clipboard-check',
    url: '/dashboards/project',
    end: true
}

Link

{
    'id'    : 'test-link',
    'title' : 'Test Link',
    'type'  : 'link',
    'icon'  : 'link',
    'url'   : 'http://fusetheme.com',
    'target': '_blank'
},

Divider

{
    'id'   : 'project',
    'title': 'Project',
    'type' : 'item',
    'url'  : '/apps/dashboards/project'
}
{
    'type': 'divider
},
{
    'id'   : 'project',
    'title': 'Project',
    'type' : 'item',
    'url'  : '/apps/dashboards/project'
}

Showcase

const navigationShowcase = [
	{
		id: 'navigation-features',
		title: 'Navigation features',
		subtitle: 'Collapsable levels & badge styles',
		type: 'group',
		icon: 'heroicons-outline:bars-3',
		children: [
			{
				id: 'navigation-features.level.0',
				title: 'Level 0',
				icon: 'heroicons-outline:check-circle',
				type: 'collapse',
				children: [
					{
						id: 'navigation-features.level.0.1',
						title: 'Level 1',
						type: 'collapse',
						children: [
							{
								id: 'navigation-features.level.0.1.2',
								title: 'Level 2',
								type: 'collapse',
								children: [
									{
										id: 'navigation-features.level.0.1.2.3',
										title: 'Level 3',
										type: 'collapse',
										children: [
											{
												id: 'navigation-features.level.0.1.2.3.4',
												title: 'Level 4',
												type: 'collapse',
												children: [
													{
														id: 'navigation-features.level.0.1.2.3.4.5',
														title: 'Level 5',
														type: 'collapse',
														children: [
															{
																id: 'navigation-features.level.0.1.2.3.4.5.6',
																title: 'Level 6',
																type: 'item'
															}
														]
													}
												]
											}
										]
									}
								]
							}
						]
					}
				]
			},
			{
				id: 'navigation-features2.level.0',
				title: 'Level 0',
				subtitle: 'With subtitle',
				icon: 'heroicons-outline:check-circle',
				type: 'collapse',
				children: [
					{
						id: 'navigation-features2.level.0.1-1',
						title: 'Level 1.1',
						type: 'item'
					},
					{
						id: 'navigation-features2.level.0.1-2',
						title: 'Level 1.2',
						type: 'item'
					}
				]
			},
			{
				id: 'navigation-features.active',
				title: 'Active item',
				subtitle: 'Manually marked as active',
				icon: 'heroicons-outline:check-circle',
				type: 'item',
				active: true
			},
			{
				id: 'navigation-features.disabled-collapse',
				title: 'Disabled collapse',
				subtitle: 'Some subtitle',
				icon: 'heroicons-outline:check-circle',
				type: 'collapse',
				disabled: true,
				children: [
					{
						id: 'navigation-features.disabled-collapse.child',
						title: "You shouldn't be able to see this child",
						type: 'item'
					}
				]
			},
			{
				id: 'navigation-features.disabled-item',
				title: 'Disabled item',
				subtitle: 'Some subtitle',
				icon: 'heroicons-outline:check-circle',
				type: 'item',
				disabled: true
			},
			{
				id: 'navigation-features.badge-style-oval',
				title: 'Oval badge',
				icon: 'heroicons-outline:tag',
				type: 'item',
				badge: {
					title: '8',
					classes: 'w-20 h-20 bg-teal-400 text-black rounded-full'
				}
			},
			{
				id: 'navigation-features.badge-style-rectangle',
				title: 'Rectangle badge',
				icon: 'heroicons-outline:tag',
				type: 'item',
				badge: {
					title: 'Updated!',
					classes: 'px-8 bg-teal-400 text-black rounded'
				}
			},
			{
				id: 'navigation-features.badge-style-rounded',
				title: 'Rounded badge',
				icon: 'heroicons-outline:tag',
				type: 'item',
				badge: {
					title: 'NEW',
					classes: 'px-10 bg-teal-400 text-black rounded-full'
				}
			},
			{
				id: 'navigation-features.badge-style-simple',
				title: 'Simple badge',
				icon: 'heroicons-outline:tag',
				type: 'item',
				badge: {
					title: '87 Unread',
					classes: 'bg-transparent text-teal-500'
				}
			}
		]
	}
];

export default navigationShowcase;

Actions

setNavigation

Use `setNavigation(navigation<Array>)` action to set/change whole navigation.

With the button below, whole navigation is changed.

<Button
  onClick={() => {
    dispatch(
      setNavigation([
        {
          id: 'dashboards',
          title: 'Dashboards',
          subtitle: 'Unique dashboard designs',
          type: 'group',
          icon: 'heroicons-outline:home',
          children: [
            {
              id: 'dashboards.project',
              title: 'Project',
              type: 'item',
              icon: 'heroicons-outline:clipboard-check',
              url: '/dashboards/project',
            },
            {
              id: 'dashboards.analytics',
              title: 'Analytics',
              type: 'item',
              icon: 'heroicons-outline:chart-pie',
              url: '/dashboards/analytics',
            },
          ],
        },
        {
          id: 'auth',
          title: 'Auth',
          type: 'group',
          icon: 'verified_user',
          children: [
            {
              id: 'sign-out',
              title: 'Sign out',
              type: 'item',
              url: 'sign-out',
              icon: 'exit_to_app',
            },
          ],
        },
      ])
    );
  }}
  variant="contained"
  color="secondary"
>
  Set Navigation
</Button>

resetNavigation

Use `resetNavigation()` action to reset navigation to initial state.

With the button below, navigation is returned to config defaults.

<Button
    onClick={()=> {
        dispatch(resetNavigation());
    }}
    variant="contained"
    color="secondary"
>
    Reset Navigation
</Button>

updateNavigationItem

Use`updateNavigationItem(id, object)`action to update a navigation item.

With clicking the button below, a badge will be added into the 'Project' dashboard navigation item.

<Button
	onClick={() => {
		dispatch(
			updateNavigationItem('dashboards.project', {
				badge: {
					title: 'NEW'
				}
			})
		);
	}}
	variant="contained"
	color="secondary"
>
	Update Navigation Item
</Button>

removeNavigationItem

Use `removeNavigationItem(id)` action to remove a navigation item.

With the button below, "Calendar" navigation item is removed.

<Button
      onClick={()=> {
          dispatch(removeNavigationItem('apps.calendar'))
      }}
      variant="contained"
      color="secondary"
>
Remove Navigation Item
</Button>

prependNavigationItem

Use`prependNavigationItem(object, collapseId/groupId?)`action to prepend a navigation item into the navigation array.

With the button below, "fusetheme.com" navigation item is added at the top of the navigation array.

<Button
    onClick={()=> {
        dispatch(prependNavigationItem(
            {
                'id'    : 'test-link',
                'title' : 'fusetheme.com',
                'type'  : 'link',
                'icon'  : 'link',
                'url'   : 'http://fusetheme.com',
                'target': '_blank'
            }
        ))
    }}
    variant="contained"
    color="secondary"
>
    Prepend Navigation Item
</Button>

With the button below, "fusetheme.com" navigation item is added into the top of the "Dashboards" children.

<Button
    onClick={()=> {
        dispatch(prependNavigationItem(
            {
                'id'    : 'test-link',
                'title' : 'fusetheme.com',
                'type'  : 'link',
                'icon'  : 'link',
                'url'   : 'http://fusetheme.com',
                'target': '_blank'
            }, 'dashboards'
        ))
    }}
    variant="contained"
    color="secondary"
>
    Prepend Navigation Item
</Button>

appendNavigationItem

Use`appendNavigationItem(object, collapseId/groupId?)`action to append a navigation item into the navigation array.

With the button below, "fusetheme.com" navigation item is added at the bottom of the array.

<Button
    onClick={()=> {
        dispatch(appendNavigationItem(
            {
                'id'    : 'test-link',
                'title' : 'fusetheme.com',
                'type'  : 'link',
                'icon'  : 'link',
                'url'   : 'http://fusetheme.com',
                'target': '_blank'
            }
        ))
    }}
    variant="contained"
    color="secondary"
>
    Append Navigation Item
</Button>

With the button below, "fusetheme.com" navigation item is added into the bottom of the "Dashboards" children.

<Button
    onClick={()=> {
        dispatch(appendNavigationItem(
            {
                'id'    : 'test-link',
                'title' : 'fusetheme.com',
                'type'  : 'link',
                'icon'  : 'link',
                'url'   : 'http://fusetheme.com',
                'target': '_blank'
            }, 'dashboards'
        ))
    }}
    variant="contained"
    color="secondary"
>
    Append Navigation Item
</Button>