---
title: Navigation 导航栏
nav:
  path: /Components
  title: Components
group:
  path: /business
  title: 业务组件
---

## Navigation

Demo:

```tsx
import React, { useState } from 'react';
import { Navigation } from 'react-yis-component';

export default function() {
  const [visible, setVisible] = useState(false);

  function onSearch(e) {}

  const authorizationlist = [
    {
      productlogo:
        'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yisepos.png',
      productcode: 'YIS-EPOS',
      productname: '奕善EPOS收银系统（PC版）',
    },
    {
      productlogo:
        'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yiserp.png',
      productcode: 'YIS-ERP',
      productname: '奕善ERP',
    },
  ];

  const options = [
    {
      title: '开放平台',
      children: [
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yisopenapi.png',
          url: '',
          key: 'YIS-OPENAPI',
          title: '奕善开放平台（API）',
          isopen: '0',
          isauthorization: '0',
        },
      ],
    },
    {
      title: '新零售平台',
      children: [
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yiseshop.png',
          url: '',
          key: 'YIS-ESHOP',
          title: 'E店主企业版（APP)',
          isopen: '0',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yises.png',
          url: '',
          key: 'YIS-ESMALL',
          title: '奕善云商',
          isopen: '0',
          isauthorization: '0',
        },
      ],
    },
    {
      title: '资源/服务',
      children: [
        {
          images: '',
          url: '',
          key: 'YIS-DBSERVER',
          title: '服务器区域',
          isopen: '0',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yisonlinepay.png',
          url: '',
          key: 'YIS-ONLINEPAY',
          title: '支付中心',
          isopen: '0',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yissms.png',
          url: '',
          key: 'YIS-SMS',
          title: '奕善短信平台',
          isopen: '1',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yisoss.png',
          url: '',
          key: 'YIS-YUNDISK',
          title: '奕善云盘',
          isopen: '0',
          isauthorization: '0',
        },
      ],
    },
    {
      title: '进销存',
      children: [
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yiserp.png',
          url: '',
          key: 'YIS-ERP',
          title: '奕善ERP',
          isopen: '1',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yislerp.png',
          url: '',
          key: 'YIS-LERP',
          title: '奕善轻ERP系统（移动版）',
          isopen: '1',
          isauthorization: '1',
        },
      ],
    },
    {
      title: '零售收银',
      children: [
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yisepos.png',
          url: '',
          key: 'YIS-EPOS',
          title: '奕善EPOS收银系统（PC版）',
          isopen: '1',
          isauthorization: '0',
        },
        {
          images:
            'https://csjpic.oss-cn-hangzhou.aliyuncs.com/prtsyspic/yisconsole/yismpos.png',
          url: '',
          key: 'YIS-MPOS',
          title: '奕善MPOS收银系统',
          isopen: '1',
          isauthorization: '0',
        },
      ],
    },
  ];

  const searchlist = [
    {
      title: '产品列表',
      children: [
        {
          attribution: '',
          url: '',
          title: '奕善MPOS收银系统',
        },
      ],
    },
    {
      title: '常见问题列表',
      children: [
        {
          attribution: '奕善运维',
          url: '',
          title: 'ERP业务库BIid批量核查脚本',
        },
      ],
    },
    {
      title: '功能列表',
      children: [
        {
          attribution: '奕善EPOS收银系统（PC版）',
          url: '',
          title: 'EPM如何新建促销调价',
        },
      ],
    },
    {
      title: '更新日志列表',
      children: [],
    },
  ];

  const personals = {
    urllist: [
      { title: '待办事项', type: 'backlog', url: '' },
      { title: '消息', type: 'message', url: '' },
      {
        title: '帮助中心',
        type: 'helpcenter',
        url: 'https://help.yis-soft.com.cn/',
      },
    ],
    headimg:
      'http://clientimginfo.csjsoft.cn/Y0070/prtsysimg/eshoppic/c0f3c45c-960a-4d55-9c89-94929121e9f0',
    lastlogintime: '2023-11-17 09:59',
    loginname: '18857985289',
    movephone: '18857985289',
    isauth: '1',
    nowclient: {
      dblist: [
        {
          dbaccountkey: 'IhEhQgKNz7v43gJKlH8HM9+4hGSvFjCisHXGpCt+1lQ=',
          dbaccountname: '数智云ERP2023帐套',
          remark: '',
          dsappkey: '49287428949567871980487593',
          dbsupplier: '奕善软件.数智云',
        },
      ],
      clientname: ' 奕善软件',
      alias: '',
      clientcode: 'Y0070',
      clientlogo: '',
      country: '东城区',
      province: '北京市',
      city: '北京市',
      area: null,
      street: '',
      isauth: '1',
      stat: '1',
      clientkey: '49287428949567871980487593',
      clientuserkey: 'GsxGell/VNqIl2kWnyvVxazSfIzySgJG',
      rolelist: '12,25,31,50,202',
    },
    operaterid: 'P15289558406MB',
    username: '黄涛',
  };

  const pageOptions = [
    { title: '基本资料', linkUrl: '', num: 0 },
    { title: '实名认证', linkUrl: '', num: 0 },
    { title: '我的权限', linkUrl: '', num: 0 },
    { title: '账户安全', linkUrl: '', num: 0 },
  ];

  return (
    <div
      style={{
        minHeight: 480,
        padding: 1,
        position: 'relative',
        overflow: 'hidden',
        background: '#F6F9F0',
      }}
    >
      <Navigation
        logoUrl={'测试'}
        onSearch={onSearch}
        drawervisible={visible}
        onChangeVisible={visible => setVisible(visible)}
        personals={personals}
        onChangeClient={item => console.log(item)}
        authservicelist={authorizationlist}
        authoptions={options}
        onTitleClick={(key, e) => console.log(key, e)}
        searchlist={searchlist}
        exiturl="http://dataai.yis-soft.com/"
        pageOptions={pageOptions}
        onChangePage={link => console.log(link)}
      />
    </div>
  );
}
```

## 参数

| 参数          | 说明                                               | 类型                                  | 默认值 |
| ------------- | -------------------------------------------------- | ------------------------------------- | ------ |
| logoUrl       | Logo                                               | React.ReactNode 或 string             | -      |
| onSearch      | 点击导航栏搜索图标、清除图标，或按下回车键时的回调 | function(value, event)                | -      |
| drawervisible | Drawer 是否可见                                    | boolean, () => HTMLElement, Selectors | false  |