Vertical Layout Components

Understanding the structure of our Vertical Layout is crucial for efficient navigation and customization. This layout comprises several components, each designed for specific functionality and user experience.

1. Navigation Menu (left sidebar)

The Navigation Menu, positioned on the left side, is organized for straightforward access and navigation:

• Navigation Header: This area showcases your company's brand, featuring the logo and/or name. It also includes icons for toggling the sidebar that allows users to collapse or expand the navigation menu
• Navigation Section (MenuSection): This segment hosts various navigation groups and items, organizing them into coherent sections for better user experience. Learn more about structuring this section here
• Navigation Group (SubMenu): These groups include navigation items or smaller subgroups, forming a hierarchical menu structure. For detailed guidance, see here
• Navigation Item (MenuItem): The fundamental unit of the navigation menu, each item represents a link to a specific page of the template. For a deeper understanding, refer here.

Navigation Component

The Navigation component is created to render the navigation menu which contains the navigation header and all the navigation items (menu sections, submenus and menu items). You can update this component as per your requirements as it is localted src/components/layout/vertical/Navigation.tsx. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navigation menu.

Props

The Navigation component takes the following properties:

Prop Name	Type	Description
dictionary	Awaited<ReturnType<typeof getDictionary>>	Dynamic object for localization or language-specific text. This prop is used only if you are using the translation (i18n) feature.
mode	system, light or dark	The mode of the template.
systemMode	light or dark	The system mode of the user's device.
skin	default or bordered	The skin of the template.

Usage

You may refer to the src/app/[lang]/(dashboard)/(private)/layout.tsx file for its usage. (if translation (i18n) feature is implemented)

You may refer to the src/app/(dashboard)/(private)/layout.tsx file for its usage. (if the translation (i18n) feature is not implemented)

We encourage you to refer to the Vertical menu examples to understand how to structure your navigation menu and effectively utilize the various props available for all the related components.

NavHeader Component

The NavHeader component is created as a styled wrapper of the logo and the icons for toggling (collapsing/expanding) the navigation menu. This component is strategically placed src/@menu/components/vertical-menu/NavHeader.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

Logo Component

The Logo component is created to render the logo and text of a company/brand. This component is strategically placed src/components/layout/shared/Logo.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

You can update this component as per your requirements. You may refer to this guide on how to customize the logo.

NavCollapseIcons Component

The NavCollapseIcons component is created to render the icons for toggling (collapsing/expanding) the navigation menu. This component is strategically placed src/@menu/components/vertical-menu/NavCollapseIcons.tsx, ensuring a structured and accessible location. You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage. You may also refer this example for all the props and their usage.

VerticalMenu Component

The VerticalMenu component is created to render the navigation items (menu sections, submenus and menu items). This component is strategically placed src/components/layout/vertical/VerticalMenu.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navigation menu.

Props

The VerticalMenu component takes the following properties:

Prop Name	Type	Description
dictionary	Awaited<ReturnType<typeof getDictionary>>	Dynamic object for localization or language-specific text. This prop is used only if you are using the translation (i18n) feature.

Usage

You may refer to the src/components/layout/vertical/Navigation.tsx file for its usage.

2. Navbar

The Navbar spans the top of the layout and is crafted to facilitate quick access to various functions:

Left Side Section

• Navigation Menu Toggler: This component is particularly useful for mobile and tablet devices, allowing users to toggle the navigation menu
• Template Search: An intuitive search function to quickly navigate to a specific page.

Right Side Section

• Change Language: This feature allows users to switch the template's language, catering to a diverse audience
• User Actions: Dedicated space for user-centric actions like profile, account settings, logout, etc.

Navbar Component

The Navbar component serves as a dedicated wrapper, encapsulating your navbar content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/Navbar.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your navbar.

Props

The Navbar component takes the following properties:

Prop Name	Type	Required	Description
children	ReactNode	Yes	This prop is used to pass child components or elements that will be rendered inside the Navbar component.
overrideStyles	CSSObject	No	This allows the user to pass custom styles to the Navbar component. It accepts a CSSObject, which is a type from the @emotion/styled library for defining CSS styles in JavaScript objects.

Usage

You may refer to the src/components/layout/vertical/Navbar.tsx file for its usage.

How to update Content?

To change the content of the navbar, you can do so in the src/components/layout/vertical/NavbarContent.tsx file. NavbarContent is a component designed for displaying content in the navbar.

How to update Styling?

To update the navbar styling, you can do so like the following:

// Component Imports
import LayoutNavbar from '@layouts/components/vertical/Navbar'

const Navbar = () => {
  return (
    <LayoutNavbar overrideStyles={{ '& .ts-vertical-layout-navbar': { backgroundColor: 'lightcyan !important' } }}>
      ...
    </LayoutNavbar>
  )
}

export default Navbar

You may also refer to the src/@layouts/styles/vertical/StyledHeader.tsx file for all of our navbar stylings and then override them as per your requirements in the overrideStyles prop as shown above.

3. Content

The Content section is the primary area of the layout, where the main content of the template is displayed.

LayoutContent Component

The LayoutContent component serves as a dedicated wrapper, encapsulating your page content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/LayoutContent.tsx, ensuring a structured and accessible location. You may refer to the src/@layouts/VerticalLayout.tsx file for its usage.

4. Footer

The Footer, located at the bottom, provides essential information and links:

• Copyright: Located on the left side, it asserts the ownership and copyright of the content and design
• Important Links: Positioned on the right, this section typically includes links to significant pages like License, Themes, Support portal, etc., offering easy navigation to important information.

Footer Component

The Footer component serves as a dedicated wrapper, encapsulating your footer content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/vertical/Footer.tsx, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your footer.

Props

The Footer component takes the following properties:

Prop Name	Type	Required	Description
children	ReactNode	Yes	This prop is used to pass child components or elements that will be rendered inside the Footer component.
overrideStyles	CSSObject	No	This allows the user to pass custom styles to the Footer component. It accepts a CSSObject, which is a type from the @emotion/styled library for defining CSS styles in JavaScript objects.

Usage

You may refer to the src/components/layout/vertical/Footer.tsx file for its usage.

How to update Content?

To change the content of the footer, you can do so in the src/components/layout/vertical/FooterContent.tsx file. FooterContent is a component designed for displaying content in the footer.

How to update Styling?

To update the footer styling, you can do so like the following:

// Component Imports
import LayoutFooter from '@layouts/components/vertical/Footer'

const Footer = () => {
  return (
    <LayoutFooter overrideStyles={{ '& .ts-vertical-layout-footer-content-wrapper': { backgroundColor: 'lightcyan' } }}>
      ...
    </LayoutFooter>
  )
}

export default Footer

You may also refer to the src/@layouts/styles/vertical/StyledFooter.tsx file for all of our footer stylings and then override them as per your requirements in the overrideStyles prop as shown above.