Hướng dẫn sử dụng Navigation trong react-bootstrap

Bài đăng này đã không được cập nhật trong 7 năm

I. Tổng quan về Navigation

Navigation là một meta component của bootstrap hỗ trợ tạo một menu tiêu đề điều hướng trong app hoặc website.
Navigation được sử dụng rất dễ dàng bằng cách dùng camelCase thay cho css class trong tag.

II. Cài đặt

Navigation là một component của bootstrap, vì vậy để sử dụng Navigation chỉ cần cài đặt react-bootstrap
react-bootstrap được cài đặt rất dễ dàng bằng câu lệnh npm install --save react-bootstrap hoặc thêm vào file package.json thư viện:

{
    "dependencies": {
        "react-bootstrap": "0.30.0"
    }
}

trước khi chạy câu lệnh npm install

III. Các cách sử dụng Navigation

1. Sử dụng navs dưới dạng `pills` và `tabs`:

Sử dụng thẻ <Nav> dưới dạng pills hoặc tabs bằng thuộc tính bsStyle với cấu trúc:

<Nav bsStyle="tabs" onSelect={handleSelect} stacked>
  <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
  <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>

<Nav bsStyle="pills" onSelect={handleSelect} justified>
  <NavItem eventKey={1} href="/home">NavItem 1 content</NavItem>
  <NavItem eventKey={2} title="Item">NavItem 2 content</NavItem>
  <NavItem eventKey={3} disabled>NavItem 3 content</NavItem>
</Nav>

Các action được customize trong function bandleSelect ở thuộc tính onSelect
Có thể disable các NavItem bằng cách thêm thuộc tính disabled trong thẻ <NavItem>
Ta cũng có thể căn chỉnh các tabs thành dạng full-width bằng các thêm vào thuộc tính justified trong thẻ <Nav>
Với Nav, ta dễ dàng style các tab theo chiều dọc bằng các thêm vào thẻ <Nav> thuộc tính stacked
Ngoài ra, với các tab có thêm sub-menu dưới dạng dropdown ta có thể sử dụng thẻ <NavDropdown> với cấu trúc:

<NavDropdown eventKey="4" title="Dropdown" id="nav-dropdown">
  <MenuItem eventKey="4.1">Action</MenuItem>
  <MenuItem eventKey="4.2">Another action</MenuItem>
  <MenuItem eventKey="4.3">Something else here</MenuItem>
  <MenuItem divider />
  <MenuItem eventKey="4.4">Separated link</MenuItem>
</NavDropdown>

2. Sử dụng Navbars để tạo các header menu:

Ta có thể dễ dàng tạo một header menu bằng cách dùng thẻ <NavBar> với cấu trúc:

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">React-Bootstrap</a>
      </Navbar.Brand>
    </Navbar.Header>
    <Nav>
      <NavItem eventKey={1} href="#">Link</NavItem>
      <NavItem eventKey={2} href="#">Link</NavItem>
      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
        <MenuItem eventKey={3.1}>Action</MenuItem>
        <MenuItem eventKey={3.2}>Another action</MenuItem>
        <MenuItem eventKey={3.3}>Something else here</MenuItem>
        <MenuItem divider />
        <MenuItem eventKey={3.4}>Separated link</MenuItem>
      </NavDropdown>
    </Nav>
  </Navbar>

Có thể thêm thuộc tính inverse trong thẻ <Navbar inverse> để chuyển màu menu sang màu đen.
Thẻ <Nav> trong Navbar được dùng như phần trên.
Với <NavBar.Header> để hiển thị logo và link đến trang home của web hoặc app. Trong <NavBar.Header>, ta có thể dùng thẻ <Navbar.Toggle> để customize cho button menu trên mobile và dùng thẻ <Navbar.Brand> để customize cho logo và link đến home.
Khi không có thẻ <Navbar.Toggle />, các items trong menu sẽ không thay đổi khi chuyển sang chế độ mobile, ngược lại, khi ta thêm thẻ <Navbar.Toggle /> trong <NavBar.Header> như ví dụ trên, các items trong thẻ <Nav> sẽ được thu gọn vào 1 button khi chuyển sang chế độ mobile.
Khi dùng thẻ <Navbar.Toggle />, tất các các items còn lại được bao trong thẻ <Navbar.Collapse>. Trong đó, ta có thể customize các Nav bằng thuộc tính pullRight để tạo các items được căn lề phải và pullLeft để căn lề trái.
Ngoài các item dưới dạng link, ta cũng có thể tạo các form trong header menu bằng thẻ <NavBar.Form> với cấu trúc:

  <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">Brand</a>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
      <Navbar.Form pullLeft>
        <FormGroup>
          <FormControl type="text" placeholder="Search" />
        </FormGroup>
        <Button type="submit">Submit</Button>
      </Navbar.Form>
    </Navbar.Collapse>
  </Navbar>

V. Kết luận

Trên đây là những ví dụ cơ bản nhất trong việc sử dụng Navigation của react-bootstrap để tạo ra các menu điều hướng trang. Hi vọng bài viết có thể cung cấp cách nhìn tổng quan, dễ hiểu nhất cho những bạn mới tiếp xúc với các components đơn giản của thư viện react-bootstrap. Chúng ta có thể tìm hiểu rất nhiều components khác rất tiện dụng trong thư viện react-bootstrap của react qua trang chính thức: https://react-bootstrap.github.io/components.html Tài liệu tham khảo: https://react-bootstrap.github.io/components.html#navigation