title: Override liferay-ui navigation taglib
body: <h2>Problem</h2>
  
  <p>I'm implementing a css component library within a Liferay theme, adding the css to the custom.css file. I've hit an issue with implementing the changes to the navigation which is currently using a taglib <code>liferay-ui:navigation</code> to generate and style the navigation (using <code>init.jsp</code> and <code>page.jsp</code> in the navigation taglib). The taglib is called in a custom navigation hook as:</p>
  
  <pre><code>&lt;liferay-ui:navigation
  bulletStyle="&lt;%= bulletStyle %&gt;"
  displayStyle="&lt;%= displayStyle %&gt;"
  ...etc
  /&gt;
  </code></pre>
  
  <p>This generates the following html:</p>
  
  <pre><code>&lt;div class="nav-menu nav-menu-style-dots" id="aui_3_4_0_1_406"&gt;
    &lt;ul class="layouts level-1" id="aui_3_4_0_1_405"&gt;
      ...list items
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The relevant lines in the taglib <code>page.jsp</code> are:</p>
  
  <pre><code>&lt;div class="nav-menu nav-menu-style-&lt;%= bulletStyle %&gt;"&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>sb.append("&lt;ul class=\"layouts level-");
  </code></pre>
  
  <p>The component library does not use the class names that Liferay generates and the library is used across multiple applications not all built in Liferay. </p>
  
  <h2>Options</h2>
  
  <p>To solve this I think I have two options:</p>
  
  <ul>
  <li>Change the css classes in the components library to match the classes generated by Liferay. I don't like this option because it will mean that there will be different css classes in different applications each doing the same thing. Also, it removes the benefit of having a components library.</li>
  <li>Find some way of overriding the taglib e.g. <a href="https://stackoverflow.com/questions/22328085/liferay-display-only-top-menu-pages-in-navigation-portlet/22329773#22329773">creating a custom hook</a> or modifying my existing navigation hook. I prefer this option because it keeps the components library intact and is more maintainable.</li>
  </ul>
  
  <h2>Question</h2>
  
  <p>Is it possible to override the liferay-ui navigation taglib using a hook or some other method (maybe alloy-ui) to override the lines above in <code>page.jsp</code>?</p>