<commit_before><% content_for :title, "Simple navigation renderer" %>

<div class="content-spacing">

  <p>You can use the <code>ornament_menu</code> simple-navigation renderer to automatically add arrows, toggle and accessibility features.</p>
  <p>In order to use this renderer in your app, you will need to register the renderer in your <code>navigation.rb</code> file.</p>

  <div data-styleguide-code-sample>
    <pre class="sg-pre prettyprint"># config/navigation.rb
SimpleNavigation.register_renderer :ornament_menu => OrnamentNavRenderer</pre>
  </div>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament1", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav aria-label="Global Navigation">
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example1",
      icons: true,
      toggles: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example1",
      icons: true,
      toggles: true,
      temporary_toggles: true,
     }) %>
  </nav>
</div>
  <%- end -%>

  <hr />
  <h2 class="heading-two">Accessability features</h2>

  <p>When used in conjuction with the <code>simple-navigation.js</code>, your navigation menus will gain several accessibility features:</p>
  <p>When focused on a first-level parent item, you can press <kbd>down</kbd> or <kbd>space</kbd> to open the menu and focus on the first link.</p>
  <p>When focused on second-level or third-level items, you can press <kbd>up</kbd> or <kbd>down</kbd> to cycle focus through the list links.</p>
  <p>When focused on a second-level parent item, you can press <kbd>right</kbd> or <kbd>space</kbd> to open the child menu.</p>
  <p>When focused on a third-level item, you can press <kbd>left</kbd> to close the menu and focus on the parent button.</p>
  <p>Any second or third-level menus can be closed with <kbd>esc</kbd>, one level at a time. Closing will focus on the opener.</p>

  <hr />
  <h2 class="heading-two">A note about IDs</h2>
  <p>One of the benefits of this renderer is that also comes with the ability to customise the key ids to a namespace with <code>id_namespace</code>.</p>
  <p>This is required if you have multiple menus using any of the same navitems, eg in the case of seperate desktop and mobile navigation. If you have multiple menus using either no namespace or the same namespace, you will notice duplicate id errors in the console and any toggles may start triggering multiple times. Best practice is to always define a namespace.</p>

  <hr />
  <h2 class="heading-two">Customising renderer</h2>
  <p>Like all of Ornament, the renderer is generated in to your project so you can customise to suit your needs. The renderer is generated in to <code>/app/renderers/ornament_nav_renderer.rb</code>.</p>

  <hr />
  <h2 class="heading-two">Split parent icons</h2>

  <p>To split the toggle button and still have the parent link as an actual link, you can change <code>toggle: true</code> to <code>toggle: "split"</code>.</p>
  <p>Keyboard shortcuts will work on both the parent link and the toggle button.</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament-split", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav aria-label="Global Navigation">
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-split",
      toggles: "split",
      icons: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-split",
      toggles: "split",
      temporary_toggles: true,
      icons: true,
    }) %>
  </nav>
</div>
  <%- end -%>

  <hr />
  <h2 class="heading-two">Icons</h2>
  
  <p><code>icons: true</code> will render the chevron icons by default. You can omit this option to render without icons:</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament2", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav>
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-no-icons",
      toggles: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-no-icons",
      toggles: true,
      temporary_toggles: true,
    }) %>
  </nav>
</div>
  <%- end -%>

  <p>Alternatively you can pass a hash to define the expand and collapse icons, <code>icons: { expand: icon("expand"), collapse: icon("collapse") }</code>:
  <p>If you only pass in <code>expand</code> you will simply override the default icon.</p>
  <p>If you pass in both <code>expand</code> and <code>collapse</code> you will then be able to swap the icon based on active state.</p>
  <p>This can be handy if you have entirely different icons for collapse and expand states, however it is recommended to use a single icon and animate it when you can.</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-icons-custom", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav>
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-icons-custom",
      toggles: true,
      icons: {
        expand: icon("star_empty"),
        collapse: icon("star"),
      }
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({<commit_msg>Navigation - added missing property<commit_after><% content_for :title, "Simple navigation renderer" %>

<div class="content-spacing">

  <p>You can use the <code>ornament_menu</code> simple-navigation renderer to automatically add arrows, toggle and accessibility features.</p>
  <p>In order to use this renderer in your app, you will need to register the renderer in your <code>navigation.rb</code> file.</p>

  <div data-styleguide-code-sample>
    <pre class="sg-pre prettyprint"># config/navigation.rb
SimpleNavigation.register_renderer :ornament_menu => OrnamentNavRenderer</pre>
  </div>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament1", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav aria-label="Global Navigation">
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example1",
      icons: true,
      toggles: true,
      temporary_toggles: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example1",
      icons: true,
      toggles: true,
      temporary_toggles: true,
     }) %>
  </nav>
</div>
  <%- end -%>

  <hr />
  <h2 class="heading-two">Accessability features</h2>

  <p>When used in conjuction with the <code>simple-navigation.js</code>, your navigation menus will gain several accessibility features:</p>
  <p>When focused on a first-level parent item, you can press <kbd>down</kbd> or <kbd>space</kbd> to open the menu and focus on the first link.</p>
  <p>When focused on second-level or third-level items, you can press <kbd>up</kbd> or <kbd>down</kbd> to cycle focus through the list links.</p>
  <p>When focused on a second-level parent item, you can press <kbd>right</kbd> or <kbd>space</kbd> to open the child menu.</p>
  <p>When focused on a third-level item, you can press <kbd>left</kbd> to close the menu and focus on the parent button.</p>
  <p>Any second or third-level menus can be closed with <kbd>esc</kbd>, one level at a time. Closing will focus on the opener.</p>

  <hr />
  <h2 class="heading-two">A note about IDs</h2>
  <p>One of the benefits of this renderer is that also comes with the ability to customise the key ids to a namespace with <code>id_namespace</code>.</p>
  <p>This is required if you have multiple menus using any of the same navitems, eg in the case of seperate desktop and mobile navigation. If you have multiple menus using either no namespace or the same namespace, you will notice duplicate id errors in the console and any toggles may start triggering multiple times. Best practice is to always define a namespace.</p>

  <hr />
  <h2 class="heading-two">Customising renderer</h2>
  <p>Like all of Ornament, the renderer is generated in to your project so you can customise to suit your needs. The renderer is generated in to <code>/app/renderers/ornament_nav_renderer.rb</code>.</p>

  <hr />
  <h2 class="heading-two">Split parent icons</h2>

  <p>To split the toggle button and still have the parent link as an actual link, you can change <code>toggle: true</code> to <code>toggle: "split"</code>.</p>
  <p>Keyboard shortcuts will work on both the parent link and the toggle button.</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament-split", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav aria-label="Global Navigation">
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-split",
      toggles: "split",
      temporary_toggles: true,
      icons: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "example-split",
      toggles: "split",
      temporary_toggles: true,
      icons: true,
    }) %>
  </nav>
</div>
  <%- end -%>

  <hr />
  <h2 class="heading-two">Icons</h2>
  
  <p><code>icons: true</code> will render the chevron icons by default. You can omit this option to render without icons:</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-ornament2", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav>
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-no-icons",
      toggles: true,
      temporary_toggles: true,
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
      context: :styleguide_sample,
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-no-icons",
      toggles: true,
      temporary_toggles: true,
    }) %>
  </nav>
</div>
  <%- end -%>

  <p>Alternatively you can pass a hash to define the expand and collapse icons, <code>icons: { expand: icon("expand"), collapse: icon("collapse") }</code>:
  <p>If you only pass in <code>expand</code> you will simply override the default icon.</p>
  <p>If you pass in both <code>expand</code> and <code>collapse</code> you will then be able to swap the icon based on active state.</p>
  <p>This can be handy if you have entirely different icons for collapse and expand states, however it is recommended to use a single icon and animate it when you can.</p>

  <%= render layout: "/layouts/styleguide/styleguide_feature", locals: { id: "nav-icons-custom", no_html: true, ruby: capture { -%>
&lt;div class="navigation">
  &lt;nav>
    &lt;%= koi_render_navigation({
      cache_key: "header_nav",
      nav_items_fetch_key: "header_navigation",
      renderer: :ornament_menu,
      level: 1..3,
      expand_all: true,
      id_namespace: "nav-icons-custom",
      toggles: true,
      temporary_toggles: true,
      icons: {
        expand: icon("star_empty"),
        collapse: icon("star"),
      }
    }) %>
  &lt;/nav>
&lt;/div>
  <%- } } do -%>
<div class="navigation">
  <nav aria-label="Global Navigation">
    <%= render_navigation({
{'fraction_non_alphanumeric': 0.13758338386901153, 'fraction_numerical': 0.004244996967859308, 'mean_word_length': 3.5150581793292264, 'pattern_counts': {'":': 0, '<': 253, '<?xml version=': 0, '>': 293, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4266368', 'n_tokens_mistral': 4401, 'n_tokens_neox': 4294, 'n_words': 1334}