Joana Mendes

Joana Mendes

Administrator

Home
Reports

RDS - Navigation Component's

The Navigation Components page in our design system offers a comprehensive suite of essential UI elements designed to facilitate smooth and intuitive navigation within your applications. These Vue.js components enable users to move effortlessly through your app's interface. Detailed documentation in Storybook provides extensive guidance for implementation and customization, ensuring each component can be tailored to your precise requirements.

Explore the different components as well and their configurations to find the best fit for your data visualization needs. Each component is accompanied by comprehensive documentation and examples to help you get started quickly and efficiently.

1. Breadcrumb

The Breadcrumb component is used to display the navigational path taken by a user within an application. It helps users understand their current location in the application's hierarchy and easily navigate back to previous pages.

1. light='false' dismissible='true' float='flase'

2. InnerTabs

The InnerTabs component is used to create integrated navigation solutions using tabs. This component allows users to switch between different views or sections within the same context, providing an organized and user-friendly way to navigate through related content.

1. variant="green"
Overview
Contents of tab-1
Contents of tab-2
Tab-3 content
Contents of tab-4
2. variant="red" + Hirizontal scroll
Overview
Contents of tab-1
Contents of tab-2
Tab-3 content
Contents of tab-4
Contents of tab-5
Contents of tab-6
Contents of tab-7
Contents of tab-8

3. Link

The Link component is used to navigate to another page within an application or to an external website. It provides options to open the link in the same tab or in a new tab, offering flexibility in navigation.

1. newTab="true" size="sm" :bold="false"
2. newTab="true" size="lg" :bold="true"
3. newTab="true" size="xl" :bold="false"

4. MobileNavigation

MobileNavigation is a sidebar that provides quick and easy access to the main sections of the application in the mobile environment.

Rahul's Design System
StartRahul's Design SystemBooking CenterMedical care

5. NavBar

NavBars are components used to create navigation solutions and menus.

6. PageLayout

PageLayout is a collection of components that allows the creation of standardized screens with primary navigation vertically and secondary navigation horizontally.

7. Pagination

Pagination are status indicators used to make important metadata evident.

1. value="1" perPage="10" total="60" fluid="true"
1
2
3
4
5

8. SegmentedControl

SegmentedControls are components that allow the user to view alternative versions of a feature or interface.

1. withIcon="false"
2. withIcon="false" segmentsTooltipText is passed

9. SideBar

SideBars are components used to create navigation solutions and menus.

1. withIcon="false"

10. Tabs

Tabs are components used to create internal navigation solutions.

1. withIcon="false"
Psychology Room
Physiotherapy Room
Otorhinolaryngologist Room