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 name key is used for the name of the route on the Navbar
  • The icon key is used for the icon of the route on the Navbar.
  • The collapse key is used for making a collapsible item on the Navbar that contains other routes inside (nested routes), you need to pass the nested routes inside an array as a value for thecollapse 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 component key is used to store the component of its route.
  • The dropdown key is used to define that the item should open a dropdown for its collapse items.
  • The description key is used to define the description of a route under its name
  • The columns key is used to define that how the content should look inside the dropdown menu as columns, you can set the columns amount based on this key.
  • The rowsPerColumn key is used to define that how many rows should be in a column.
Contents