How to use Panelbar as menu plus breadcrumb for layout (page)

[Frans]

Hi,

I would like to know how to setup a generic MVC layout(page) with a (panelbar) menu on the left (collapsable when mobile) 
together with a Breadcrumb. Should be responsive / mobile first.
Actually something like your demos page navigation, but then the menu should be collapsable. Like the panelbar.

Is there a complete example for this ? Or do I have to fuzzle manually to achieve this ?

(At first I was thinking about using the menu control, but to my surprise I saw that control is not responsive.)

Martin

[Ivan Danchev]

Hi Frans,

The PanelBar has no capabilities of collapsing on smaller screens (mobile). However, you can consider nesting it in another component - the ResponsivePanel. The ResponsivePanel collapses its content when the screen reaches a specified width. A menu button appears and clicking on it shows the collapsed content.

Here's an example of a PanelBar nested in a ResponsivePanel:

@(Html.Kendo().ResponsivePanel()
	.Name("rp")
	.Breakpoint(1000)
	.Orientation("top")
	.Content(@<text>
		@(Html.Kendo().PanelBar()
			.Name("panelbar")
			.ExpandMode(PanelBarExpandMode.Single)
			.Items(panelbar =>
			{
				panelbar.Add().Text("Home")
					.Items(projects =>
					{
						projects.Add().Text("Index").Url(Url.Action("Index", "Home"));
						projects.Add().Text("About").Url(Url.Action("About", "Home"));
						projects.Add().Text("Content").Url(Url.Action("Content", "Home"));
					});
				panelbar.Add().Text("Test")
					.Items(projects =>
					{
						projects.Add().Text("Test1").Url(Url.Action("Test1", "Test"));
						projects.Add().Text("Test2").Url(Url.Action("Test2", "Test"));
						projects.Add().Text("Test3").Url(Url.Action("Test3", "Test"));
					});
			})
		)
	</text>)
)

The Url option of the PanelBar sub items is set and shows how you can use it for navigation.

Similarly to the demonstrated nesting of a PanelBar in the ResponsivePanel, you could nest a Breadcrumb component.

Regards,
Ivan Danchev
Progress Telerik