Horizontal Layout Components
Understanding the structure of our Horizontal Layout is crucial for efficient navigation and customization. This layout comprises several components, each designed for specific functionality and user experience.
1. Header
The Header is the topmost section of the layout, containing the Navbar and the Navigation menu. It is designed to be compact and intuitive, allowing users to quickly access the navigation menu and other essential actions.
Header Component
The Header
component serves as a dedicated wrapper, encapsulating your header content while seamlessly integrating with the predefined template styles. This component is strategically placed src/@layouts/components/horizontal/Header.tsx
, ensuring a structured and accessible location. Let's explore the various props available and demonstrate how to effectively utilize it to enhance your header.
Props
The Header
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 Header component. |
overrideStyles | CSSObject | No | This allows the user to pass custom styles to the Header 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/horizontal/Header.tsx
file for its usage.
How to update Content?
To change the content of the header, you can do so in the src/components/layout/horizontal/Header.tsx
file itself as this file is designed for displaying content in the header.
How to update Styling?
To update the header styling, you can do so like the following:
// Component Imports
import LayoutHeader from '@layouts/components/horizontal/Header'
const Header = (/* props if any */) => {
return (
<LayoutHeader overrideStyles={{ backgroundColor: 'lightcyan !important' }}>
...
</LayoutHeader>
)
}
You may also refer to the src/@layouts/styles/horizontal/StyledHeader.tsx
file for all of our header stylings and then override them as per your requirements in the overrideStyles
prop as shown above.
1. 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
- Company Logo and/or Name: Positioned prominently, this represents your brand identity and serves as a visual anchor for users.
Right Side Section
- Template Search: An intuitive search function to quickly navigate to a specific page
- Change Language: This feature allows users to switch the application'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/horizontal/Navbar.tsx
, ensuring a structured and accessible location.
Usage
You may refer to the src/components/layout/horizontal/Header.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/horizontal/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 LayoutHeader from '@layouts/components/horizontal/Header'
const Header = (/* props if any */) => {
return (
<LayoutHeader overrideStyles={{ '& .ts-horizontal-layout-navbar': { backgroundColor: 'lightcyan' } }}>
...
</LayoutHeader>
)
}
2. Navigation Menu
The Navigation Menu is organized for straightforward access and navigation:
- Navigation Group (Submenu): These groups include navigation items or smaller subgroups, forming a hierarchical menu structure. For detailed guidance, see here
- Navigation Item: The fundamental unit of the navigation menu, each item represents a link to a specific page of the application. For a deeper understanding, refer here
Navigation Component
The Navigation
component is created to render the navigation menu which contail all the navigation items (submenus and menu items) and it serves as a dedicated wrapper, encapsulating your navigation menu. You can update this component as per your requirements as it is localted src/components/layout/horizontal/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. |
Usage
You may refer to the src/components/layout/horizontal/Header.tsx
file for its usage.
We encourage you to refer to the Horizontal menu examples to understand how to structure your navigation menu and effectively utilize the various props available for all the related components.
HorizontalMenu Component
The HorizontalMenu
component is created to render the navigation items (submenus and menu items). This component is strategically placed src/components/layout/horizontal/HorizontalMenu.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 HorizontalMenu
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/horizontal/Navigation.tsx
file for its usage.
VerticalNavContent Component
The VerticalNavContent
component is created to render the navigation items (submenus and menu items) in the vertical navigation menu for the mobile and tablet devices. You can update this component as per your requirements as it is localted src/components/layout/horizontal/VerticalNavContent.tsx
. You may refer to the src/components/layout/horizontal/HorizontalMenu.tsx
file for its usage.
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/horizontal/LayoutContent.tsx
, ensuring a structured and accessible location. You may refer to the src/@layouts/HorizontalLayout.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/horizontal/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/horizontal/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/horizontal/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/horizontal/Footer'
const Footer = () => {
return (
<LayoutFooter
overrideStyles={{ '& .ts-horizontal-layout-footer-content-wrapper': { backgroundColor: 'lightcyan' } }}
>
...
</LayoutFooter>
)
}
export default Footer
You may also refer to the src/@layouts/styles/horizontal/StyledFooter.tsx
file for all of our footer stylings and then override them as per your requirements in the overrideStyles
prop as shown above.