Creative Tim  |  Docs

Routing System

We’ve created these dynamic routes, so the Sidenav and DefaultNavbar components would not get too loaded with code. You will find all our demo routes for the Sidenav in src/routes.js and for the DefaultNavbar in src/page.routes.js

Sidenav

  • The type key with the collapse value is used for a route.
  • The type key with the title value is used for a title inside the Sidenav.
  • The type key with the divider value is used for a divider between Sidenav items.
  • The name key is used for the name of the route on the Sidenav.
  • The key key is used for the key of the route (It will help you with the key prop inside a loop).
  • The icon key is used for the icon of the route on theSidenav, you have to add a node.
  • The collapse key is used for making a collapsible item on the Sidenav that contains other routes inside (nested routes), you need to pass the nested routes inside an array as a value for the collapse key.
  • The route key is used to store the route location which is used for the react router.
  • The href key is used to store the external links location.
  • The title key is only for the item with the type of title and its used for the title text on the Sidenav.
  • The component key is used to store the component of its route.

Default Navbar

  • The type key with the collapse value is used for a route.
  • The name key is used for the name of the route on the DefaultNavbar.
  • The key key is used for the key of the route (It will help you with the key prop inside a loop).
  • The icon key is used for the icon of the route on theDefaultNavbar, you have to add a node.
  • The collapse key is used for making a collapsible item on the DefaultNavbar that contains other routes inside (nested routes), you need to pass the nested routes inside an array as a value for the collapse key.
  • The route key is used to store the route location which is used for the react router.
  • The href key is used to store the external links location.
Contents