New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Navigation Overview

Resize the browser to see the responsive capabilities of RadNavigation. If there is not enough space the right placed categories will become part of the sandwich-like button.
The menu dropdowns also offer screen boundary detection which you can enable by setting EnableScreenBoundaryDetection="true".

  • Guitars & Basses
    • Classical Guitars
      • 1/2 Size Classical Guitars
      • 3/4 Size Classical Guitars
      • 7/8 Size Classical Guitars
      • 4/4 Size Classical Guitars
      • Lefthanded Classical Guitars
      • Concert Guitars
    • Steel String Guitars
      • 3/4 Size and Travel Guitars
      • Dreadnought Guitars
      • Jumbo Guitars
      • Folk Guitars
      • 12-String Westernguitars
      • Lefthanded Acoustic Guitars
    • Acoustic Basses
      • Electric Guitars
        • ST Models
        • T-Models
        • LP-Models
        • SG Models
        • 7-String Guitars
        • 8-String Guitars
        • Lefthanded Guitars
      • Electric Basses
        • 4-String J-Basses
        • 5-String J-Basses
        • 4-String P-Basses
        • Misc. 4-String Basses
        • Misc. 5-String Basses
      • Amplifiers for Acoustic Guitars
      • Amplifiers for Electric Guitars
      • Bass Amplifiers
  • Drums & E-Drums
    • Acoustic Drumsets
      • Acoustic Drumsets
      • Shell Sets
      • Bass Drums
      • Tomtoms
    • E-Drums
      • Electronic Drumsets
      • E - Drum Sound Modules
      • E - Drum Bass Pads
      • E - Drum Tom Pads
      • E - Drum Snare Pads
      • E - Drum Cymbal Pads
    • Drum Thrones
  • Percussions
    • Percussion sets
    • Congas
    • Bongos
    • Djembes
    • Cajons, Cajintos, Yambus
    • Hand Drums
    • Tambourines
    • Maracas
  • Pianos & E-Pianos
    • Grand pianos
    • Upright pianos
    • Disklavier
    • Silent pianos
    • Hybrit pianos
    • Digital pianos
    • State pianos
    • Accessories
  • Strings
    • Violins and Violas
    • Electric Violins and Violas
    • Accessories for Violins and Violas
    • Electric Cellos
    • Double Basses
  • Wind Instruments
    • Saxophones
    • Trumpets
    • Flugelhorns
    • Trombones
    • Horns
    • Flutes
    • Clarinets
  • Audio & PA
    • Loudspeakers
    • Power Amplifiers
    • Intecoms
    • Audiotools
    • Microphones
    • Mixing Desks
    • Studio Monitors
    • Digital Converters
    • Synchronizers
    • Controllers
    • Audio Interface
    • MIDI Equipment
  • Lighting & Stage
    • Club & Disco
    • Stage
    • Cinema & TV
    • Architectural & Decorative Lighting
    • Controller & Dimmer
    • Lighting Stands & Grip
  • Video & Multimedia
    • Camera support
    • Video Processing
    • Displays
    • Projectors
    • Screens
    • Interactive Screens
  • Cables & Connectors
    • Instrumental Cables
    • Microphone Cables
    • Guitar Cables
    • XLR connectors
    • Jack
    • Banana Connectors
  • Accessories
    • Stands
    • Seats and Stools
    • Metronomes and Tuners
    • Batteries and Charging sets
    • Clothing
all you need to get job done...
guitar

guitars

Here you will find a list of all product groups in Guitars, Basses, amps and accessories - all you need to get the job done.

view more
drums

drums

From acoustic drum sets to electronic drum pads to drum machines and djembes - all you need to get the job done.

view more
piano

pianos

Here you will find a list of all product groups in Pianos & E-pianos - all you need to get the job done.

view more
microphone

audio

Microphones & Wireless systems for large or small venues - all you need to get the job done.

view more

The demo shows how you can easily build a navigation menu for a musical store with categories and sub-categories using the Telerik Navigation control. The control is fully responsive and due to the limited horizontal space in the browser some of the categories are automatically hidden under the context menu of the sandwich-like button (part of RadNavigation UI).

About RadNavigation for ASP.NET AJAX

Telerik RadNavigation for ASP.NET AJAX is a widget that you can use to easily build navigation scenarios with multiple hyperlinks. The control has a lightweight rendering and responsive behavior by default.

Key features

  • Light-weight rendering
  • Built-in mobile support
  • Server-side templates
  • Keyboard support
  • WCAG 2.0 and Section 508 Accessibility Compliant
  • Visual Appeal – ships with rich set of skins for easy and consistent styling.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Overview_DefaultCS" %>

<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:MessageBox ID="InformationBox1" runat="server" Type="Info" Icon="Info">
        <p>
            Resize the browser to see the responsive capabilities of RadNavigation.
            If there is not enough space the right placed categories will become part of the sandwich-like button. <br />
            The menu dropdowns also offer screen boundary detection which you can enable by setting EnableScreenBoundaryDetection="true".
        </p>
    </telerik:MessageBox>

    <div class="demo-container no-bg">
        <telerik:RadNavigation runat="server" ID="Nav1" EnableScreenBoundaryDetection="true">
            <Nodes>
                <telerik:NavigationNode Text="Guitars & Basses">
                    <Nodes>
                        <telerik:NavigationNode Text="Classical Guitars">
                            <Nodes>
                                <telerik:NavigationNode Text="1/2 Size Classical Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="3/4 Size Classical Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="7/8 Size Classical Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="4/4 Size Classical Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Lefthanded Classical Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Concert Guitars"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Steel String Guitars">
                            <Nodes>
                                <telerik:NavigationNode Text="3/4 Size and Travel Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Dreadnought Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Jumbo Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Folk Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="12-String Westernguitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Lefthanded Acoustic Guitars"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Acoustic Basses">
                            <Nodes>
                                <telerik:NavigationNode Text="Electric Guitars">
                                    <Nodes>
                                        <telerik:NavigationNode Text="ST Models"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="T-Models"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="LP-Models"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="SG Models"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="7-String Guitars"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="8-String Guitars"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="Lefthanded Guitars"></telerik:NavigationNode>
                                    </Nodes>
                                </telerik:NavigationNode>
                                <telerik:NavigationNode Text="Electric Basses">
                                    <Nodes>
                                        <telerik:NavigationNode Text="4-String J-Basses"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="5-String J-Basses"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="4-String P-Basses"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="Misc. 4-String Basses"></telerik:NavigationNode>
                                        <telerik:NavigationNode Text="Misc. 5-String Basses"></telerik:NavigationNode>
                                    </Nodes>
                                </telerik:NavigationNode>
                                <telerik:NavigationNode Text="Amplifiers for Acoustic Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Amplifiers for Electric Guitars"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Bass Amplifiers"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Drums & E-Drums">
                    <Nodes>
                        <telerik:NavigationNode Text="Acoustic Drumsets">
                            <Nodes>
                                <telerik:NavigationNode Text="Acoustic Drumsets"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Shell Sets"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Bass Drums"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Tomtoms"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="E-Drums">
                            <Nodes>
                                <telerik:NavigationNode Text="Electronic Drumsets"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="E - Drum Sound Modules"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="E - Drum Bass Pads"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="E - Drum Tom Pads"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="E - Drum Snare Pads"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="E - Drum Cymbal Pads"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Drum Thrones"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Percussions">
                    <Nodes>
                        <telerik:NavigationNode Text="Percussion sets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Congas"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Bongos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Djembes"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Cajons, Cajintos, Yambus"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Hand Drums"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Tambourines"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Maracas"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Pianos & E-Pianos">
                    <Nodes>
                        <telerik:NavigationNode Text="Grand pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Upright pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Disklavier"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Silent pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Hybrit pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Digital pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="State pianos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Accessories"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Strings">
                    <Nodes>
                        <telerik:NavigationNode Text="Violins and Violas"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Electric Violins and Violas"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Accessories for Violins and Violas"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Electric Cellos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Double Basses"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Wind Instruments">
                    <Nodes>
                        <telerik:NavigationNode Text="Saxophones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Trumpets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Flugelhorns"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Trombones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Horns"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Flutes"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Clarinets"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Audio & PA">
                    <Nodes>
                        <telerik:NavigationNode Text="Loudspeakers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Power Amplifiers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Intecoms"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Audiotools"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Microphones"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Mixing Desks"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Studio Monitors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Digital Converters"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Synchronizers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Controllers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Audio Interface"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="MIDI Equipment"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Lighting & Stage">
                    <Nodes>
                        <telerik:NavigationNode Text="Club & Disco"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Stage"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Cinema & TV"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Architectural & Decorative Lighting"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Controller & Dimmer"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Lighting Stands & Grip"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Video & Multimedia">
                    <Nodes>
                        <telerik:NavigationNode Text="Camera support"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Video Processing"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Displays"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Projectors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Screens"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Interactive Screens"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Cables & Connectors">
                    <Nodes>
                        <telerik:NavigationNode Text="Instrumental Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Microphone Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Guitar Cables"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="XLR connectors"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Jack"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Banana Connectors"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Accessories">
                    <Nodes>
                        <telerik:NavigationNode Text="Stands"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Seats and Stools"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Metronomes and Tuners"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Batteries and Charging sets"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Clothing"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
            </Nodes>
        </telerik:RadNavigation>
        <div class="header">all you need to get job done...</div>
        <telerik:RadPageLayout runat="server" GridType="Fluid">
            <Rows>
                <telerik:LayoutRow>
                    <Columns>
                        <telerik:CompositeLayoutColumn Span="3" SpanSm="12" SpanXs="12" CssClass="guitars">
                            <Content>
                                <img src="images/IconGuitar.png" alt="guitar" />
                                <h3>guitars</h3>
                                <p class="desription">Here you will find a list of all product groups in Guitars, Basses, amps and accessories - all  you need to get the job done.</p>
                                <div class="footer">
                                    <span class="moreBtn">view more</span>
                                </div>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                        <telerik:CompositeLayoutColumn Span="3" SpanSm="12" SpanXs="12" CssClass="drums">
                            <Content>
                                <img src="images/IconDrums.png" alt="drums" />
                                <h3>drums</h3>
                                <p class="desription">From acoustic drum sets to electronic drum pads to drum machines and djembes - all you need to get the job done.</p>
                                <div class="footer">
                                    <span class="moreBtn">view more</span>
                                </div>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                        <telerik:CompositeLayoutColumn Span="3" SpanSm="12" SpanXs="12" CssClass="pianos">
                            <Content>
                                <img src="images/IconPiano.png" alt="piano" />
                                <h3>pianos</h3>
                                <p class="desription">Here you will find a list of all product groups in Pianos & E-pianos - all you need to get the job done.</p>
                                <div class="footer">
                                    <span class="moreBtn">view more</span>
                                </div>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                        <telerik:CompositeLayoutColumn Span="3" SpanSm="12" SpanXs="12" CssClass="audio">
                            <Content>
                                <img src="images/IconMicrophone.png" alt="microphone" />
                                <h3>audio</h3>
                                <p class="desription">Microphones & Wireless systems for large or small venues - all you need to get the job done.</p>
                                <div class="footer">
                                    <span class="moreBtn">view more</span>
                                </div>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                    </Columns>
                </telerik:LayoutRow>
            </Rows>
        </telerik:RadPageLayout>
    </div>


    </form>
</body>
</html>

Support & Learning Resources

Find Assistance