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: 'lucide:house',
  children: [
    {
      id: 'apps.academy',
      title: 'Academy',
      type: 'item',
      icon: 'lucide:graduation-cap',
      url: '/apps/academy',
    }
  ]

Collapse

{
    id: 'apps.ecommerce',
    title: 'ECommerce',
    type: 'collapse',
    icon: 'lucide: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: 'lucide: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: 'lucide: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'
}

Actions

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

With the button below, whole navigation will be changed.

const {setNavigation} = useNavigation();

<Button
  onClick={() => {
    setNavigation([
      {
        id: 'dashboards',
        title: 'Dashboards',
        subtitle: 'Unique dashboard designs',
        type: 'group',
          icon: 'lucide:house',
          children: [
            {
              id: 'dashboards.project',
              title: 'Project',
              type: 'item',
              icon: 'lucide:clipboard-check',
              url: '/dashboards/project',
            },
            {
              id: 'dashboards.analytics',
              title: 'Analytics',
              type: 'item',
              icon: 'lucide: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>

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

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

const {resetNavigation} = useNavigation();

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

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.

const {updateNavigationItem} = useNavigation();

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

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

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

const {removeNavigationItem} = useNavigation();

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

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.

const {prependNavigationItem} = useNavigation();

<Button
    onClick={()=> {
        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.

const {prependNavigationItem} = useNavigation();

<Button
    onClick={()=> {
        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>

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.

const {appendNavigationItem} = useNavigation();

<Button
      onClick={()=> {
          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.

const {appendNavigationItem} = useNavigation();

<Button
    onClick={()=> {
        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>