<ul id="nav">

  <li class="nav-section">
    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/index.html">Get Started</a></div>
    <ul>
      <li><a href="<?cs var:toroot ?>design/get-started/creative-vision.html">Creative Vision</a></li>
      <li><a href="<?cs var:toroot ?>design/get-started/principles.html">Design Principles</a></li>
    </ul>
  </li>

  <li class="nav-section">
    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html">Material Design</a></div>
  </li>

  <li class="nav-section">
    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
    <ul>
      <li><a href="<?cs var:toroot ?>design/handhelds/index.html">Phones &amp; Tablets</a></li>
      <li class="nav-section">
        <div class="nav-section-header">
          <a href="<?cs var:toroot ?>design/wear/index.html">Wear</a></div>
        <ul>
          <li><a href="<?cs var:toroot ?>design/wear/creative-vision.html">Creative Vision</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/principles.html">Design Principles</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/structure.html">App Structure</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/context.html">Context Awareness</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/patterns.html">UI Patterns</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/style.html">Style</a></li>
          <li><a href="<?cs var:toroot ?>design/wear/watchfaces.html">Watch Faces</a></li>
        </ul>
      </li>
      <li class="nav-section">
        <div class="nav-section-header">
          <a href="<?cs var:toroot ?>design/tv/index.html">TV</a></div>
        <ul>
          <li><a href="<?cs var:toroot ?>design/tv/principles.html">Creative Vision</a></li>
          <li><a href="<?cs var:toroot ?>design/tv/patterns.html">UI Patterns</a></li>
          <li><a href="<?cs var:toroot ?>design/tv/style.html">Style</a></li>
        </ul>
      </li>
      <li><a href="<?cs var:toroot ?>design/auto/index.html">Auto</a></li>
    </ul>
  </li>

  <li class="nav-section">
    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/style/index.html">Style</a></div>
    <ul>
      <li><a href="<?cs var:toroot ?>design/style/devices-displays.html">Devices and Displays</a></li>
      <li><a href="<?cs var:toroot ?>design/style/themes.html">Themes</a></li>
      <li><a href="<?cs var:toroot ?>design/style/touch-feedback.html">Touch Feedback</a></li>
      <li><a href="<?cs var:toroot ?>design/style/metrics-grids.html">Metrics and Grids</a></li>
      <li><a href="<?cs var:toroot ?>design/style/typography.html">Typography</a></li>
      <li><a href="<?cs var:toroot ?>design/style/color.html">Color</a></li>
      <li><a href="<?cs var:toroot ?>design/style/iconography.html">Iconography</a></li>
      <li><a href="<?cs var:toroot ?>design/style/branding.html">Your Branding</a></li>
      <li><a href="<?cs var:toroot ?>design/style/writing.html" zh-cn-lang="写作风格">Writing Style</a></li>
    </ul>
  </li>

  <li class="nav-section">
    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></div>
    <ul>
      <li><a href="<?cs var:toroot ?>design/patterns/new.html">New in Android</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/gestures.html">Gestures</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/fullscreen.html">Full Screen</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/confirming-acknowledging.html">Confirming &amp; Acknowledging</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/notifications.html">Notifications</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/widgets.html">Widgets</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/settings.html">Settings</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/help.html">Help</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/compatibility.html">Compatibility</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/accessibility.html">Accessibility</a></li>
      <li><a href="<?cs var:toroot ?>design/patterns/pure-android.html">Pure Android</a></li>
    </ul>
  </li>

  <li class="nav-section">
    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></div>
    <ul>
      <li><a href="<?cs var:toroot ?>design/building-blocks/tabs.html">Tabs</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/lists.html">Lists</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/grid-lists.html">Grid Lists</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/scrolling.html">Scrolling</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/spinners.html">Spinners</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/buttons.html">Buttons</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/text-fields.html">Text Fields</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/seek-bars.html">Seek Bars</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/progress.html">Progress &amp; Activity</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/switches.html">Switches</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/dialogs.html">Dialogs</a></li>
      <li><a href="<?cs var:toroot ?>design/building-blocks/pickers.html">Pickers</a></li>
    </ul>
  </li>

  <li class="nav-section">
    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
  </li>

  <li class="nav-section">
    <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></div>
  </li>

</ul>