React Navbar Overview

    A barra de navegação do Ignite UI for React informa o usuário sobre sua posição atual em um aplicativo. A Barra de Navegação também pode fornecer links para ações rápidas, como pesquisa ou favorito, ajudando os usuários a navegar sem problemas por um aplicativo sem tentar mover para rotas ou estados inválidos. A barra fica no topo do recipiente em que é colocada.

    React Navbar Example

    The following example represents a IgrNavbar with icons and text header:

    Usage

    Before using the IgrNavbar, you need to register it as follows:

    Para uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    You will then need to import the IgrNavbar and its necessary CSS like so:

    import { IgrNavbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrNavbar>
    <span>Navigation Title</span>
</IgrNavbar>

    Content

    You can enhance the IgrNavbar component by adding IgrIcon or other components at the start or end position as content, allowing users to navigate to key positions directly from the bar:

     <IgrNavbar>
    <div slot="start">
        <IgrIcon name="home" collection="material" />
    </div>
    <h2>Sample App</h2>
    <div slot="end">
        <IgrIcon name="search" collection="material" />
    </div>
    ...
</IgrNavbar>

    Styling

    The NavBar component exposes several CSS parts, giving you full control over its style:

    Nome Descrição
    base O wrapper base da barra de navegação.
    start O contêiner de ícone alinhado à esquerda.
    middle O contêiner de título da barra de navegação.
    end O contêiner de ícones de ação alinhado à direita. 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    API References

    Additional Resources