# EuiListComponent

**Type:** component

<p>Component that provides a navigable list implementation with keyboard interaction support.
Works with Angular CDK&#39;s FocusKeyManager to enable keyboard navigation between list items.</p>
<p>The component automatically manages focus between nested lists and supports rich content
navigation. It can contain multiple EuiListItemComponents as children.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;ul euiList&gt;
  &lt;li euiListItem&gt;First item&lt;/li&gt;
  &lt;li euiListItem&gt;Second item&lt;/li&gt;
  &lt;li euiListItem&gt;Third item&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><h3>With Nested Lists</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;ul euiList&gt;
  &lt;li euiListItem&gt;
    Parent item
    &lt;ul euiList&gt;
      &lt;li euiListItem&gt;Child item&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses semantic <code>list</code> role</li>
<li>Keyboard navigation with Arrow keys</li>
<li>Enter key activates items</li>
<li>Focus management for nested lists</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used as attribute <code>[euiList]</code> or element <code>&lt;eui-list&gt;</code></li>
<li>Supports nested list structures</li>
<li>Automatically manages tabindex for keyboard navigation</li>
</ul>


**Selector:** `[euiList], eui-list`

**Standalone:** false
