# Top Navigation Component

### Features

<table data-header-hidden><thead><tr><th width="296"></th><th></th></tr></thead><tbody><tr><td>Feature</td><td>Description</td></tr><tr><td>Title</td><td>Highlights title</td></tr><tr><td>Search </td><td>Can search communities and users globally or joined communities</td></tr><tr><td>Creation</td><td>Create Post, Story, Poll or Livestream</td></tr></tbody></table>

### Customization

<table><thead><tr><th width="330">Config ID</th><th width="122">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>social_home_page/top_navigation/*</code></td><td>Component</td><td>You can customize component <code>theme</code></td></tr><tr><td><code>social_home_page/top_navigation/header_label</code></td><td>Element</td><td>You can customize <code>text</code></td></tr><tr><td><code>social_home_page/top_navigation/global_search_button</code></td><td>Element</td><td>You can customize <code>icon</code></td></tr><tr><td><code>social_home_page/top_navigation/post_creation_button</code></td><td>Element</td><td>You can customize <code>icon</code></td></tr></tbody></table>

For more details on customization, please refer to the [Customization](https://docs.social.plus/social-plus-uikit/uikit-4/customization) page.

### Usage <a href="#usage" id="usage"></a>

The component is designed to be easily integrated into your application, providing a rich user interface for social interactions.

{% tabs %}
{% tab title="iOS" %}
{% embed url="<https://gist.github.com/amythee/89ea0d897d99b5de6bce0d60cc749d11>" %}
{% endtab %}

{% tab title="Android" %}
{% embed url="<https://gist.github.com/cbb8964c6c2236427f47792df81dbf14>" %}
{% endtab %}

{% tab title="Web" %}
{% embed url="<https://gist.github.com/amythee/f4976089ae1718b0dcf7f83f2a4c9d7a>" %}
{% endtab %}

{% tab title="React Native" %}
{% embed url="<https://gist.github.com/amythee/2fb673457852733b32555728606db1b6>" %}
{% endtab %}

{% tab title="Flutter" %}
{% embed url="<https://gist.github.com/amythee/a63038e2cd1508252cdca01f50332585>" %}
{% endtab %}
{% endtabs %}