Cascade Menu
Drilldown-like part of navigation with cascading sub-menus.
Multi-level Navigation
Current page is styled differently by default. This example shows the full cascading menu with multiple levels of navigation.
<!-- source -->
<CascadeMenu source={source} />Show navigation data
{
"items": [
{
"title": "Home",
"url": "#home"
},
{
"title": "About Us",
"url": "#about-us",
"items": [
{
"title": "Our Mission",
"url": "#about-us-mission"
},
{
"title": "Leadership Team",
"url": "#about-us-leadership"
},
{
"title": "Company History",
"url": "#about-us-history"
},
{
"title": "Compliance & Ethics",
"url": "#about-us-compliance-ethics"
},
{
"title": "Social Responsibility",
"url": "#about-us-social-responsibility"
},
{
"title": "Diversity & Inclusion",
"url": "#about-us-diversity-inclusion"
},
{
"title": "Locations",
"url": "#about-us-locations"
}
]
},
{
"title": "Products",
"url": "#products",
"items": [
{
"title": "Prescription Medicines",
"url": "#products-prescription",
"items": [
{
"title": "Cardiovascular",
"url": "#products-prescription-cardiovascular",
"items": [
{
"title": "Blood Pressure Medication",
"url": "#products-prescription-cardiovascular-blood-pressure"
},
{
"title": "Cholesterol Management",
"url": "#products-prescription-cardiovascular-cholesterol"
}
]
},
{
"title": "Diabetes",
"url": "#products-prescription-diabetes",
"items": [
{
"title": "Insulin",
"url": "#products-prescription-diabetes-insulin"
},
{
"title": "Glucose Modulators",
"url": "#products-prescription-diabetes-glucose-modulators"
},
{
"title": "Injectables",
"url": "#products-prescription-diabetes-injectables",
"items": [
{
"title": "Syringes",
"url": "#products-prescription-diabetes-injectables-syringes"
}
]
}
]
}
]
},
{
"title": "Vaccines",
"url": "#products-vaccines"
},
{
"title": "Over-the-Counter (OTC)",
"url": "#products-otc"
}
]
},
{
"title": "News & Media",
"url": "#news-media"
},
{
"title": "Research & Development",
"url": "#research-development",
"items": [
{
"title": "Our Research Areas",
"url": "#research-development-areas"
},
{
"title": "Clinical Trials",
"url": "#research-development-clinical-trials"
},
{
"title": "Innovation",
"url": "#research-development-innovation"
}
]
},
{
"title": "Careers",
"url": "#careers",
"items": [
{
"title": "Why Join Us",
"url": "#careers-why-join-us"
},
{
"title": "Current Openings",
"url": "#careers-current-openings"
},
{
"title": "Students & Graduates",
"url": "#careers-students-graduates"
}
]
},
{
"title": "Investor Relations",
"url": "#investor-relations",
"items": [
{
"title": "Financial Reports",
"url": "#investor-relations-financial-reports"
},
{
"title": "Stock Information",
"url": "#investor-relations-stock-information"
},
{
"title": "Investor Events",
"url": "#investor-relations-events"
}
]
},
{
"title": "Contact Us",
"url": "#contact-us"
}
]
}Single-level with Selection
When selected is added to an item, the behavior falls back to render the selected item with a checkbox.
<!-- source -->
<CascadeMenu source={sourceOneLevel} />Show selection data
{
"items": [
{
"title": "Section one",
"url": "#section-one",
"selected": true
},
{
"title": "Section two",
"url": "#section-two"
},
{
"title": "Section three",
"url": "#section-three"
}
]
}