# ASP.NET Core Responsive Panel Overview

The Telerik UI Responsive Panel TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Responsive Panel widget.

The Responsive Panel allows you to hide part of a page content on small screens. The component collapses a content element when a specified `breakpoint` is reached. The collapsed content is then expanded by a button with the `k-rpanel-toggle` class. To set the placement of the expandable content, use the `Orientation` option.

* [Demo page for the Responsive Panel HtmlHelper](https://demos.telerik.com/aspnet-core/responsive-panel/index)

* [Demo page for the Responsive Panel TagHelper](https://demos.telerik.com/aspnet-core/responsive-panel/tag-helper)

## Initializing the Responsive Panel

The following example demonstrates how to define the Responsive Panel.

```Razor HtmlHelper
    @(Html.Kendo().ResponsivePanel()
        .Name("sidebar")
        .Breakpoint(1000)
        .Content("<p>This content will collapse if the width is less than 1000px</p>")
    )
```

```Razor TagHelper
    <kendo-responsivepanel name="sidebar" breakpoint="1000">
        <p>This content will collapse if the width is less than 1000px</p>
    </kendo-responsivepanel>
```

## Basic Configuration

The following example demonstrates a basic configuration of the Responsive Panel.

```Razor HtmlHelper
    <div class="dash-head">
        
        <button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
    </div>
    
    @(Html.Kendo().ResponsivePanel()
        .Name("sidebar")
        .Breakpoint(1000)
        .Orientation(ResponsivePanelOrientation.Left)
        .Content("<div> <div id='profile' class='widget'> <h3>Profile</h3> <div> <div class='profile-photo'>" +
        " </div> <h4>Lynda Schleifer</h4> <p>Sales Associate</p> </div> </div> <div id='teammates' class='widget'> <h3>Teammates</h3>" +
        " <div> <div class='team-mate'> <img src='./shared/web/panelbar/andrew.jpg' alt='Andrew Fuller'> <h4>Andrew Fuller</h4> <p>Team Lead</p> </div> " +
        " <div class='team-mate'> <img src='./shared/web/panelbar/nancy.jpg' alt='Nancy Leverling'> <h4>Nancy Leverling</h4> <p>Sales Associate</p></div>" +
        " <div class='team-mate'> <img src='./shared/web/panelbar/robert.jpg' alt='Robert King'> <h4>Robert King</h4> <p>Business System Analyst</p> </div> </div> </div>")
    )
```

```Razor TagHelper
        <div class="dash-head">
            
            <button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
        </div>
        
        <kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
            <div id="profile" class="widget">
                <h3>Profile</h3>
                <div>
                    <div class="profile-photo"></div>
                    <h4>Lynda Schleifer</h4>
                    <p>Sales Associate</p>
                </div>
            </div>
            <div id="teammates" class="widget">
                <h3>Teammates</h3>
                <div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
                        <h4>Andrew Fuller</h4>
                        <p>Team Lead</p>
                    </div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
                        <h4>Nancy Leverling</h4>
                        <p>Sales Associate</p>
                    </div>
                    <div class="team-mate">
                        <img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
                        <h4>Robert King</h4>
                        <p>Business System Analyst</p>
                    </div>
                </div>
            </div>
        </kendo-responsivepanel>
```

> The Telerik UI Responsive Panel component accepts any HTML that is passed in the `Content` option. For more advanced scenarios, pass custom HTML of your choice.

## CSP Compliance

The Responsive Panel relies on inline styles to create dynamic media queries. If strict [CSP mode](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/helper-basics/content-security-policy) is enabled for the applicaiton you can use the [`.Nonce`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/responsivepanelbuilder#noncesystemstring) configuration option and specify a nonce attribute that will be set to the inline style injected in the `head` tag, containing the dynamic media query styles.

## Next Steps

* [Getting Started with the Responsive Panel](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/responsivepanel/getting-started)

* [Basic Usage of the Responsive Panel HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/responsive-panel)

* [Basic Usage of the Responsive Panel TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/responsive-panel/tag-helper)

## See Also

* [Server-Side API of the Responsive Panel](https://www.telerik.com/aspnet-core-ui/documentation/api/responsivepanel)

* [Server-Side API of the Responsive Panel TagHelper](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/responsivepanel)

* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)